WebSocket 初体验



  • 针对与项目需要,我在网上学习了WebSocket 的相关知识。对于WebSocket ,你又了解多少呢?

    为什么需要 WebSocket?

    初次接触WebSocket ,我们都会问相同的问题:既然有了HTTP请求,我们为什么还需要另一个协议?它会有什么优点呢?

    答案其实十分简单,就是因为HTTP请求只能从客户端发出,并且无法保持通话。

    在我们项目中,我们需要在电脑屏幕上面扫描二维码,然后在手机上操作,在手机上做好相关的填写提交后,电脑上的浏览器应该立即显示扫描成功后的页面。

    如果我们使用的是HTTP请求,那么浏览器必须轮询:每隔一段时间向服务器请求手机是否完成相应的操作。这种单向请求的特点,注定了如果服务器有连续的状态变化,客户端要获知就非常麻烦,并且轮询的效率低,非常浪费资源(因为必须不停连接,或者 HTTP 连接始终打开)。

    因此,工程师们一直在思考,有没有更好的方法。WebSocket 就是这样发明的。

    简介

    WebSocket 与HTTP不同的特点就是服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话。

    img

    如上图所示,如果我们需要即时的、变化快的数据,可以使用WebSocket,这样可以减少客户端向服务器请求的时间。如果只是十分平常的、变化不是很快的数据,可以使用HTTP的GET、POST请求。

    简单示例

    WebSocket 的用法相当简单。

    //nodejs
    //server.js
    
    var ws = new WebSocket("wss://echo.websocket.org"); //协议标识符是ws(如果加密,则为wss),服务器网址就是 URL
    
    ws.onopen = function(evt) { 
      console.log("Connection open ..."); 
      ws.send("Hello WebSockets!");
    };
    
    ws.onmessage = function(evt) {
      console.log( "Received Message: " + evt.data);
      ws.close();
    };
    
    ws.onclose = function(evt) {
      console.log("Connection closed.");
    };
    
    //client.js
    
    var ws = new WebSocket('ws://localhost:8080');
    
    ws.addEventListener("message", function(event) {
      var data = event.data;
      // 处理数据
    });
    

    具体内容不再详细深入,因为WebSocket原生代码十分生硬,在判别不同类型请求的时候不是很好区分。

    参考链接


 

Copyright © 2018 bbs.dian.org.cn All rights reserved.

与 Dian 的连接断开,我们正在尝试重连,请耐心等待