• html client websocket


    <!doctype html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Document</title>

        <style>

     

    #mess{text-align: left;margin-left:20px;}

     

    </style>

     

    </head>

     

    <body>

     

    &nbsp;&nbsp;&nbsp;<input id="t1" size="20" style="height:50px;font-size:30px;align:center;"  type=text value="ls" onkeydown="KeyDown();"/> 

     

    <input type=button value="runShell" style="height:30px;font-size:30px"   onclick="aa();">

     

    <div  id="mess"></div>

     

        <script>

     

            var mess = document.getElementById("mess");

                var ws = new WebSocket('ws://192.168.1.119:8002');

                ws.onopen = function(e){

                    console.log("连接服务器成功");

                    ws.send("echo");

     

                }

     

                ws.onclose = function(e){

        alert(e.code+"close");

                    console.log("服务器关闭");

     

                }

                ws.onerror = function(e){

                    console.log("连接出错");

     

                }

     

                ws.onmessage = function(e){

    var s=e.data.replace(/( )|( )/g,'<br>');

     

    mess.innerHTML=(s+"<br>"+mess.innerHTML);

                    

                }

     

     

    function aa(){

     

    var t = document.getElementById("t1");

     

    console.log(t.value);

     

    ws.send(t.value,"ff");

     

     

     

    }

     

     

     

    function KeyDown()

     

    {

     

      if (event.keyCode == 13)

     

      {

     

        event.returnValue=false;

     

        event.cancel = true;

     

        aa();

     

      }

     

    }

     

        </script>

     

    </body>

     

    </html>

  • 相关阅读:
    C语言作业
    nrf52832(nrf52810)制作升级包出错及解决方法
    nrf52810的升级命令
    nrfutil生成的DFU设置十六进制文件未按字对齐
    Android CameraHal NativeWindow相关(一):从CameraHal::setPreviewWindow(struct preview_stream_ops *window)开始
    Android Camera 调用流程及调试
    Android MediaPlayer的核心原理
    Android MediaPlayer状态图明晰注释
    Android MediaPlayer状态机
    Android Camera Preview ANativeWindow的处理
  • 原文地址:https://www.cnblogs.com/wblade/p/8978640.html
Copyright © 2020-2023  润新知