前端 - 轮询, 长轮训, websocket

Dear 丶 2022-01-12 13:21 353阅读 0赞

# 轮询 #

## 概念 ##

ajax 轮询的原理很简单，让浏览器间隔几秒就发送一次请求，询问服务器是否有新信息

## 代码 ##

# 长轮训 #

## 概念 ##

原理跟 ajax轮询 差不多，都是采用轮询的方式，不过采取的是阻塞模型

也就是说，客户端发起连接后

如果没消息，就一直不返回Response给客户端，直到有消息才返回或超时

返回完之后，客户端再次建立连接，周而复始，基于事件的触发，一个事件接一个事件

## 代码 ##

# websocket #

## 概念 ##

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

浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道, 两者之间就直接可以数据互相传送。

**详细跳转** 　　 [Flask websocket][]

## 代码 ##

var ws;
    
    function WebSocketTest()
    {
       if ("WebSocket" in window)
       {
          alert("您的浏览器支持 WebSocket!");
    
          // 打开一个 web socket
          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("数据已接收..." + received_msg);
          };
          ws.onerror = function (evt) {
              //出错
              alert(JSON.stringify(evt));
           }
          ws.onclose = function()
          { 
             // 关闭 websocket
             alert("连接已关闭..."); 
          };
       }
       else
       {
          // 浏览器不支持 WebSocket
          alert("您的浏览器不支持 WebSocket!");
       }
    }
    
    ws.close();//关闭连接

转载于:https://www.cnblogs.com/shijieli/p/10902510.html

[Flask websocket]: https://www.cnblogs.com/shijieli/p/10360813.html