首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【NPM库】- 0x06 - WebSocket

【NPM库】- 0x06 - WebSocket

作者头像
WEBJ2EE
发布2020-09-01 15:49:22
8820
发布2020-09-01 15:49:22
举报
文章被收录于专栏:WebJ2EEWebJ2EE
目录
1. WebSocket
  1.1. 是什么?
  1.2. 一个例子
  1.3. 连接建立过程
2. ws
  2.1. 基础
  2.2. 简易 Server
  2.3. 复用 HTTP 连接
3. webpack-dev-server 对 WebSocket 的应用
  3.1. 总体结构
  3.2. WebSocket 后端
  3.3. WebSocket 前端

1. WebSocket

1.1. 是什么?

WebSocket 是一种通信协议,可在单个 TCP 连接上进行全双工通信。WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就可以建立持久性的连接,并进行双向数据传输。

  • 握手阶段采用 HTTP 协议
  • 数据格式轻量,性能开销小(HTTP每次都需要携带完整头部)
    • 服务端到客户端的数据包头只有2到10字节。
    • 客户端到服务端需要加上另外4字节的掩码。
  • 更好的二进制支持
    • 可以发送文本、二进制数据
  • 没有同源限制,客户端可以与任意服务器通信
  • 协议标识符是ws(如果加密,则是wss)

1.2. 一个例子

效果展示:

后端代码:

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
    ws.on('message', function incoming(message) {
        console.log('received: %s', message);
        ws.send(`echo: ${message}!`);
    });

    ws.send('connected!');
});

前端代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    .websocket {
      width: 800px;
      border: 1px solid #ccc;
      margin: 16px auto 0 auto;

      display: flex;
      flex-direction: row;
    }
    .websocket p {
      text-align: center;
    }

    .websocket > .send {
      flex: 1;
      padding: 16px;
      border-right: 1px solid #ccc;
    }
    .websocket > .send > .msg-send{
      width: 100%;
      height: 200px;
      border-radius: 5px;
    }
    .websocket > .send .btn-send {
      border: none;
      border-radius: 5px;
      background: #25d1ff;
      padding: 5px 10px;
      color: #fff;
      cursor: pointer;
    }
    .websocket > .send .btn-close {
      border: 1px solid #ccc;
      border-radius: 5px;
      background: none;
      padding: 5px 10px;
      cursor: pointer;
    }


    .websocket > .receive {
      flex: 1;
      padding: 16px;
    }
    .websocket > .receive > .msg-receive {
      height: 200px;
      border: 1px solid #ccc;
      border-radius: 5px;
      overflow: auto;
    }
    .websocket > .receive > .msg-receive > .msg-item{
      font-size: 14px;
    }
</style>
</head>
<body>
  <div class="websocket">
    <div class="send">
      <p>数据发送</p>
      <textarea type="text" class="msg-send"></textarea>
      <p>
        <button class="btn-send">发送消息</button>
        <button class="btn-close">关闭连接</button>
      </p>
    </div>
    <div class="receive">
      <p>数据接收</p>
      <div class="msg-receive"></div>
    </div>
  </div>

  <script type="text/javascript">
    const ws = new WebSocket('ws://127.0.0.1:8080');
    ws.onopen = e => {
      console.log(`WebSocket 连接状态:${ws.readyState}`)
    };
    ws.onmessage = data => {
      const msgReceive = document.querySelector('.websocket > .receive > .msg-receive');
      msgReceive.innerHTML += `<div class="msg-item">${data.data}</div>`;
    };
    ws.onclose = data => {
      console.log('WebSocket连接已关闭')
      console.log(data);
    };

    // 发送消息
    const btnSend = document.querySelector('.websocket > .send .btn-send');
    const msgSend = document.querySelector('.websocket > .send > .msg-send');
    btnSend.onclick = () => ws.send(msgSend.value);

    // 关闭链接
    const btnClose = document.querySelector('.websocket > .send .btn-close');
    btnClose.onclick = () => ws.close();
</script>
</body>
</html>

1.3. 连接建立过程

  1. 客户端发起HTTP握手,告诉服务端进行WebSocket协议通讯,并告知WebSocket协议版本。
  2. 服务端确认协议版本,升级为WebSocket协议。
  3. 之后如果有数据需要推送,会主动推送给客户端。

请求字段重点包括:

  • Connection: Upgrade,表示请求升级协议
  • Upgrade: websocket,表示请求升级到 websocket 协议
  • Sec-WebSocket-Version,表示 websocket 的版本。
    • 如果服务端不支持该版本,需要返回一个Sec-WebSocket-Versionheader,里面包含服务端支持的版本号。
  • Sec-WebSocket-Key,对应服务端响应头的Sec-WebSocket-Accept,由于没有同源限制,websocket 客户端可任意连接支持websocket的服务。这个就相当于一个钥匙一把锁,避免多余的,无意义的连接。

响应字段重点包括:

  • Sec-WebSocket-Accept:用来告知服务器愿意发起一个 websocket 连接, 值根据客户端请求头的 Sec-WebSocket-Key 计算出来。

2. ws

2.1. 基础

  • ws is a simple to use, blazing fast, and thoroughly tested WebSocket client and server implementation.

2.2. 简易 Server

const WebSocket = require('ws');
 
const ws = new WebSocket('ws://www.host.com/path');
 
ws.on('open', function open() {
  const array = new Float32Array(5);
 
  for (var i = 0; i < array.length; ++i) {
    array[i] = i / 2;
  }
 
  ws.send(array);
});

2.3. 复用 HTTP 连接

  • Multiple servers sharing a single HTTP/S server
const http = require('http');
const WebSocket = require('ws');
const url = require('url');
 
const server = http.createServer();
const wss1 = new WebSocket.Server({ noServer: true });
const wss2 = new WebSocket.Server({ noServer: true });
 
wss1.on('connection', function connection(ws) {
  // ...
});
 
wss2.on('connection', function connection(ws) {
  // ...
});
 
server.on('upgrade', function upgrade(request, socket, head) {
  const pathname = url.parse(request.url).pathname;
 
  if (pathname === '/foo') {
    wss1.handleUpgrade(request, socket, head, function done(ws) {
      wss1.emit('connection', ws, request);
    });
  } else if (pathname === '/bar') {
    wss2.handleUpgrade(request, socket, head, function done(ws) {
      wss2.emit('connection', ws, request);
    });
  } else {
    socket.destroy();
  }
});
 
server.listen(8080);

3. webpack-dev-server 对 WebSocket 的应用

3.1. 总体结构

3.2. WebSocket 后端

  • webpack-dev-server 的 WebSocket 通信默认采用 sockjs 实现。
    • 可通过 transportMode 属性进行调整。
  • webpack-dev-server 复用提供 Web 服务的 Server。
    • sockjs-node 是默认的 websocket 服务访问路径。
      • 可通过 devServer.sockPath 属性自行定制。

webpack-dev-server 的 CLI 入口:

webpack-dev-server 如何选择 WebSocket 的 Server 端实现:

webpack-dev-server 如何确定 WebSocket 的服务地址:

3.3. WebSocket 前端

  • webpack-dev-server 的 WebSocket 通信默认采用 sockjs 实现。
    • 可通过 transportMode 属性进行调整。
  • webpack-dev-server 的 WebSocket 前端,是作为一个入口,自动注入到应用系统中的。

webpack-dev-server 的 WebSocket 前端实现何时选定?:

webpack-dev-server 的 WebSocket 前端实现何时选定?:

webpack-dev-server 的 WebSocket 前端如何加载?:

参考:

ws: https://github.com/websockets/ws webpack-dev-server: https://www.webpackjs.com/configuration/dev-server/ webpack-dev-server 配置: https://webpack.js.org/configuration/dev-server/#devserversockpath https://webpack.js.org/configuration/dev-server/#devservertransportmode


本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2020-08-24,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 WebJ2EE 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档