菜鸟教程的图片介绍：

  • websocket是html5开始提供的一种在单个TCP连接上进行全双工通讯的协议 。

– 优点：使客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。

在这里插入图片描述
这些都是废话，真正有用的是下面的整块代码。

  1.  <script type="text/javascript">
  2.          function WebSocketTest()
  3.          {
  4.             if ("WebSocket" in window)
  5.             {
  6.                alert("您的浏览器支持 WebSocket!");
  7.                
  8.                // 打开一个 web socket
  9.                var ws = new WebSocket("wss://www.syfit.cn/wss");
  10.                 
  11.                ws.onopen = function()
  12.                {
  13.                   // Web Socket 已连接上，使用 send() 方法发送数据
  14.                  ws.send('{"Type":"week","UserName":null,"PassWord":null,"Week":null}')
  16.                   alert("数据发送中...");
  17.                };
  18.                 
  19.                ws.onmessage = function (evt) 
  20.                { 
  21.                   var received_msg = evt.data;
  22. 				  
  23.                   alert("数据已接收...");
  24. 				  console.log(evt.data);
  25.                };
  26.                 
  27.                ws.onclose = function()
  28.                { 
  29.                   // 关闭 websocket
  30.                   alert("连接已关闭..."); 
  31.                };
  32.             }
  33.             
  34.             else
  35.             {
  36.                // 浏览器不支持 WebSocket
  37.                alert("您的浏览器不支持 WebSocket!");
  38.             }
  39.          }
  40.       </script>
  41.         
  42.    </head>
  43.    <body>
  44.    
  45.       <div id="sse">
  46.          <a href="javascript:WebSocketTest()">运行 WebSocket</a>
  47.       </div>
  48.       
  49.    </body>

在这里插入图片描述

  1. var ws = new WebSocket(“ws://localhost:9998/echo”);
    这一句代表创建websocket连接 ws就是创建好的对象。

  2. 这个ws://localhost:9998/echo代表服务器连接。

在这里插入图片描述
跟服务器连接成功以后就会触发onopen。

  • 所有发送代码都需要在onopen之后才行
  • 这个websocket就相当于qq聊天
  • ws连接代表你要找谁聊天
  • onopen就相当于聊天窗口打开了
  • 然后send就是你要发送的内容

在这里插入图片描述
当服务器给你返回东西的时候 就会触发onmessage.
onmessage有一个参数 就是服务器发给你的数据了

基本上学习技术都是这样的 百度找别人写的代码复制下来运行 有报错就搜解决办法 后面再慢慢理解是啥意思 这样成长的就很快.
—2020.12.10

版权声明：本文为LrisLiu原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/LrisLiu/p/16525833.html