• 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>

  • 相关阅读:
    web前端笔记1
    前端与后台交互所需技术
    js的HTML属性操作
    浮动塌陷
    前端与后端的交互(定义接口)
    AjAX(第3章 Ajax的简单例子(Ajax+PHP)
    AjAX(简单概要介绍)
    Bootstrap 学习之js插件(折叠(collapse)插件)
    Net core 项目 EF CodeFist 多重外键约束问题
    对VS 2017中ASP.NET Core项目解决:Add-Migration : 无法将“Add-Migration”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。
  • 原文地址:https://www.cnblogs.com/wblade/p/8978640.html
Copyright © 2020-2023  润新知