结合两个单独工作的javascript，将实时数据发送到websocket

combining 2 javascript that works seperatly to send realtime data to websocket

本文关键字：实时 数据 websocket javascript 两个 工作 单独 结合      更新时间：2023-09-26

我正在构建一个基于树莓派的机器人。我目前正在研究控制部分。

我找到了2个独立的脚本，它们自己工作得很好，但我似乎找不到一种方法来构建我想要的这些脚本。

这就是我想要的。我想用一个软操纵杆来控制我的机器人(见下面操纵杆的代码)操纵杆的代码工作完美，因为它绘制了一个操纵杆，并将X和Y值实时返回给浏览器。

现在我想要的是使用websocket将这些值发送到我的服务器。我在我的服务器上用python安装了一个websocket服务器，它正在从我发现的示例脚本中接收值。

所以我想能够传递的值从操纵杆到websocket服务器。

如有任何提示，不胜感激

这是操纵杆部分

    <html>
    <head>
            <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
    body {
        overflow    : hidden;
        padding     : 0;
        margin      : 0;
        background-color: #BBB;
    }
    #info {
        position    : absolute;
        top     : 0px;
        width       : 100%;
        padding     : 5px;
        text-align  : center;
    }
    #info a {
        color       : #66F;
        text-decoration : none;
    }
    #info a:hover {
        text-decoration : underline;
    }
    #container {
        width       : 100%;
        height      : 100%;
        overflow    : hidden;
        padding     : 0;
        margin      : 0;
        -webkit-user-select : none;
        -moz-user-select    : none;
    }
    </style>
   </head>
   <body>
    <div id="container"></div>
        <label id="conn_text"></label><br />
    <div id="messages_txt" /></div> 
    <div id="info">
        Touch the screen and move
        -
        works with mouse too as debug
        <br/>
        <span id="result"></span>
     </div> 
    <script src="virtualjoystick.js"></script>
    <script>
        console.log("touchscreen is", VirtualJoystick.touchScreenAvailable() ? "available" : "not available");
        var joystick    = new VirtualJoystick({
            container   : document.getElementById('container'),
            mouseSupport    : true,
                            //stationaryBase: true,
                            baseX: 200,
                            baseY: 200,
                    limitStickTravel: true,
                    stickRadius: 100

        });
        joystick.addEventListener('touchStart', function(){
            console.log('down')
        })
        joystick.addEventListener('touchEnd', function(){
            console.log('up')
        })
        setInterval(function(){
            var outputEl    = document.getElementById('result');
            outputEl.innerHTML  = '<b>Result:</b> '
                + ' dx:'+joystick.deltaX()
                + ' dy:'+joystick.deltaY()
                + (joystick.right() ? ' right'  : '')
                + (joystick.up()    ? ' up'     : '')
                + (joystick.left()  ? ' left'   : '')
                + (joystick.down()  ? ' down'   : '')   
        }, 1/30 * 1000);
        setInterval(function(){
            var message = joystick.deltaX();
            ws.send(message);
        }, 1/30 * 1000);

    </script>

    </body>
    </html>

这里是socket部分

    <html>
    <head>
    <title>Websocket</title>
    <script src="http://code.jquery.com/jquery-2.0.0.js"></script>
    </head>
    <body>
    <h1>Websocket</h1>
    <label id="conn_text"></label><br />
    <input type="text" id="input_text"/>
    <input type="submit" id="button" value="Send" /><br />
    <div id="messages_txt" />
    <script>
$(document).ready(function () {
  //change example.com with your IP or your host
  var ws = new WebSocket("ws://192.168.2.35:8888/ws");
  ws.onopen = function(evt) {
  var conn_status = document.getElementById('conn_text');
  conn_status.innerHTML = "Connection status: Connected!"
  };
  ws.onmessage = function(evt) {
  var newMessage = document.createElement('p');
  newMessage.textContent = "Server: " + evt.data;
  document.getElementById('messages_txt').appendChild(newMessage);
  };
  ws.onclose = function(evt) {
  alert ("Connection closed");
  };
  $("#button").click(function(evt) {
  evt.preventDefault();
  var message = $("#input_text").val();
  ws.send(message);
  var newMessage = document.createElement('p');
  newMessage.textContent = "Client: " + message;
document.getElementById('messages_txt').textContent=newMessage.textContent;
});
});
 </script>
 </body>
 </html>

在

 var message = joystick.deltaX();
               ws.send(message);

包含在load事件处理程序

中
window.onload = function() {
          console.log("touchscreen is", VirtualJoystick.touchScreenAvailable() ? "available" : "not available");
    var joystick    = new VirtualJoystick({
        container   : document.getElementById('container'),
        mouseSupport    : true,
                        //stationaryBase: true,
                        baseX: 200,
                        baseY: 200,
                limitStickTravel: true,
                stickRadius: 100

    });
    joystick.addEventListener('touchStart', function(){
        console.log('down')
    });
    joystick.addEventListener('touchEnd', function(){
        console.log('up')
    });
    var outputEl = document.getElementById('result');
    setInterval(function(){
        outputEl.innerHTML  = '<b>Result:</b> '
            + ' dx:'+joystick.deltaX()
            + ' dy:'+joystick.deltaY()
            + (joystick.right() ? ' right'  : '')
            + (joystick.up()    ? ' up'     : '')
            + (joystick.left()  ? ' left'   : '')
            + (joystick.down()  ? ' down'   : '')   
    }, 1/30 * 1000);
    setInterval(function(){
        var message = joystick.deltaX();
        ws.send(message);
    }, 1/30 * 1000);
}

或使用.ready(function() {})。

$(function() {/* joystick stuff here */})

var outputEl = document.getElementById('result');不能在尝试赋值时被定义。

同样，没有必要在每次setInterval()调用时重新定义outputEl。您可以在setInterval调用之外定义变量。

相关文章：