websocket --- 前端

websocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行的全双工通讯(双向数据传输)的协议。主要功能是支持服务端主动向客户端推送数据，这期间只需要浏览器和服务器完成一次握手，就可以创建连接并进行双向数据传输。在这份协议之前网站为了实现信息推送技术常用轮询的方式，特定时间间隔由用户端发起请求查询是否有新信息，会浪费服务器资源。

创建 WebSockets，并连接服务器。

WebSocket(url, protocol)

@url, string, 表示要连接的 URL
@protocol, string, WebSockets 协议名字字符串

const ws = weex.requireModule('webSocket');
ws.WebSocket('ws://echo.websocket.org','');

send

通过 WebSockets 连接向服务器发送数据。

send(data)

@data, string, 要发送到服务器的数据

const ws = weex.requireModule('webSocket');
ws.WebSocket('ws://echo.websocket.org','');
ws.send('some message.');

close

关闭 WebSockets 的链接。

close(code, reason)

@code, number, 关闭连接的状态号
@reason, string, 关闭的原因

const ws = weex.requireModule('webSocket');
ws.WebSocket('ws://echo.websocket.org','');
ws.close();

onopen

一个用于连接打开事件的事件监听器，该事件表明这个连接已经准备好接受和发送数据。onopen 接受一个函数作为 EventListener，这个监听器会接受一个 type 为 "open" 的事件对象。

onopen(options)

标准 event 对象，无特殊属性。

const ws = weex.requireModule('webSocket')
ws.WebSocket('ws://echo.websocket.org','');
ws.onopen(function(event) {
  console.log('onopen', event);
});

onmessage

一个用于消息事件的事件监听器，当有消息到达的时触发。onmessage 接受一个函数作为 EventListener，这个监听器会接受一个 type 为 "message" 的事件对象。

onmessage(options)

@options, object.

data, string, 监听器接收的到的消息

const ws = weex.requireModule('webSocket')
ws.WebSocket('ws://echo.websocket.org','');
ws.onmessage(function(event) {
  console.log('onmessage', event);
});

onclose

一个用于连接关闭事件的事件监听器，当连接关闭时触发。onclose 接受一个函数作为 EventListener，这个监听器会接受一个 type 为 "close" 的事件对象。

onclose(options)

@options, object

code, number, 服务器返回关闭的状态码
reason, string, 服务器返回的关闭原因
wasClean, boolen, 是否完全关闭

const ws = weex.requireModule('webSocket')
ws.WebSocket('ws://echo.websocket.org','');
ws.onclose(function(event) {
  console.log('onclose', event);
});

onerror

一个用于 error 事件的事件监听器，当错误发生时触发。onerror 接受一个函数作为 EventListener，这个监听器会接受一个 type 为 "error" 的事件对象。

onerror(options)

@options, object
- data, string, 监听器接收的到的消息

const ws = weex.requireModule('webSocket')
ws.WebSocket('ws://echo.websocket.org','');
ws.onerror(function(event) {
  console.log('onerror', event);
});

demo

<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>菜鸟教程(runoob.com)</title>
    
      <script type="text/javascript">
         function WebSocketTest()
         {
            if ("WebSocket" in window)
            {
               alert("您的浏览器支持 WebSocket!");
               
               // 打开一个 web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
                
               ws.onopen = function()
               {
                  // Web Socket 已连接上，使用 send() 方法发送数据
                  ws.send("发送数据");
                  alert("数据发送中...");
               };
                
               ws.onmessage = function (evt) 
               { 
                  var received_msg = evt.data;
                  alert("数据已接收...");
               };
                
               ws.onclose = function()
               { 
                  // 关闭 websocket
                  alert("连接已关闭..."); 
               };
            }
            
            else
            {
               // 浏览器不支持 WebSocket
               alert("您的浏览器不支持 WebSocket!");
            }
         }
      </script>
        
   </head>
   <body>
   
      <div id="sse">
         <a href="javascript:WebSocketTest()">运行 WebSocket</a>
      </div>
      
   </body>
</html>

posted @ 2021-09-18 16:05 太阳东升西落阅读(444) 评论(0) 收藏举报

刷新页面返回顶部

太阳东升西落