前端开发数据传输实时通信之:WebSocket传输

WebSocket

  1. 一种网络传输协议,可在单个TCP连接上进行两个设备之间的双向通信
  2. 原理:通过HTTP/1.1协议的101状态码进行 一次握手,建立长连接
  3. 优点: 允许服务器主动向客户端发推送数据/只需一次握手就可建立长连接/进行
  4. 运行环境:支持 web浏览器与web服务器通信,无需客户端
  5. 与 HTTP 不同:但都是依赖于TCP传输协议,websocket 通过http的80和443端口进行传输,并支持http代理和中介;通过设置头部 HTTP Upgrade 从 http 协议改为 websocket协议
  6. 解决问题:解决了处理小消息时 Commet 双向通信的tcp握手和http头的开销
  7. 两种规范:ws(WebSocket)(明文传输,即http协议可以使用) 和 wss(WebScoket secure)(加密传输,即需要https协议)

头部示例

const headers = [
  'HTTP/1.1 101 Switching Protocols',
  'Upgrade: websocket',
  'Connection: Upgrade'
];

客户端

  function Ws(){
      if(!WebSocket in window){alert('您的浏览器不支持websocket!'); return}
      const ws = new WebSocket('ws://localhost:9000')
      ws.onopen=function (param) {console.log('opened');ws.send('success')  }
      ws.onmessage= function (msg) {console.log(msg);  }
      ws.onclose = function () {console.log('closed');  }
  }

服务端

Nodejs 版

常用框架 ws https://www.npmjs.com/package/ws
1. 两种模式:wss(需要 SSL/TLS) / ws

const ws = new WebSocket.Server({ port: 9000 });
ws.on('connection', function connection(connect) {
    connect.on('message', function incoming(message) {
    console.log('received: %s', message);
  });
connect.send('okokokok');
});
上一篇
下一篇