WebSocket原生js实现

WebSocket的原生js实现

WebSocket 是一种网络通信协议。

一、为什么使用Websocket

1. 简单介绍一下HTTP协议

HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起，服务端对请求做出应答处理。这种通信模型有一个弊端：HTTP 协议无法实现服务器主动向客户端发起消息。当服务器有连续的状态变化，客户端要获知就非常麻烦。如果通过频繁的异步 JavaScript 和 XML（AJAX）请求实现长轮询。轮询的效率低，非常浪费资源。于是工程师们根据它的缺陷发明了WebSocket。

2. 全双工通信的WebSocket

WebSocket 连接允许客户端和服务器之间进行全双工通信，以便任一方都可以通过建立的连接将数据推送到另一端。WebSocket 只需要建立一次连接，就可以一直保持连接状态。这相比于轮询方式的不停建立连接显然效率要大大提高。它的最大特点就是，服务器可以主动向客户端推送信息。

WebSocket的其他特点：

建立在 TCP 协议之上，服务器端的实现比较容易。
与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
数据格式比较轻量，性能开销小，通信高效。
可以发送文本，也可以发送二进制数据。
没有同源限制，客户端可以与任意服务器通信。
协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

WebSocket应用场景

即时聊天通信
多玩家游戏
在线协同编辑/编辑
实时数据流的拉取与推送
体育/游戏实况
实时地图位置

···········

二、WebSocket怎样工作

Web 浏览器和服务器都必须实现 WebSockets 协议来建立和维护连接。由于 WebSocket连接长期存在，与典型的 HTTP 连接不同，对服务器有重要的影响。

基于多线程或多进程的服务器无法适用于 WebSockets，因为基于多线程或多进程的服务器目的是打开连接，尽可能快地处理请求，然后关闭连接。任何实际的 WebSockets服务器端实现都需要一个异步服务器。

首先，WebSocket连接必须由浏览器发起，因为请求协议是一个标准的HTTP请求，格式如下：

GET ws://localhost:3000/ws/chat HTTP/1.1
Host: localhost
Upgrade: websocket
Connection: Upgrade
Origin: http://localhost:3000
Sec-WebSocket-Key: client-random-string
Sec-WebSocket-Version: 13

该请求和普通的HTTP请求有几点不同：

GET请求的地址不是类似/path/，而是以ws://开头的地址；
请求头Upgrade: websocket和Connection: Upgrade表示这个连接将要被转换为WebSocket连接；
Sec-WebSocket-Key是用于标识这个连接，并非用于加密数据；
Sec-WebSocket-Version指定了WebSocket的协议版本。

随后，服务器如果接受该请求，就会返回如下响应：

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: server-random-string

该响应代码101表示本次连接的HTTP协议即将被更改，更改后的协议就是Upgrade: websocket指定的WebSocket协议。

三、WebSocket客户端

目前来说，大部分主流的浏览器都能很好的支持WebSocket。我们可以直接使用浏览器提供的WebSocket对象。
对应的API：

1. 创建WebSocket对象

const ws = new WebSocket("ws://localhost:8000");

2. WebSocket属性

ws.readyState

CONNECTING：值为0，表示正在连接。
OPEN：值为1，表示连接成功，可以通信了。
CLOSING：值为2，表示连接正在关闭。
CLOSED：值为3，表示连接已经关闭，或者打开连接失败。

ws.bufferedAmount

只读属性bufferedAmount已被send()放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。

3. WebSocket事件

事件	事件处理程序	描述
open	ws.onopen	连接建立时触发
message	ws.onmessage	客户端接收服务端send过来的数据时触发
error	ws.onerror	通信发生错误时触发
close	ws.onclose	连接关闭时触发

4. WebSocket方法

方法	描述
Socket.send()	使用连接发送数据，在后端的wsServer的message事件能够接收到这里send的数据
Socket.close()	关闭连接

5. 前端对应的代码

案例简介：本文所实现的案例是一个极其简单的聊天室案例

js代码如下：

((doc, Socket, storage, location) => {
  // 获取DOM元素
  // 获取页面的ul元素
  const oList = doc.querySelector("#list");
  //获取页面的input元素
  const oMsg = doc.querySelector("#message");
  // 获取页面的发送按钮
  const oSendBtn = doc.querySelector("#send");
  // 创建客户端的WebSocket对象
  const ws = new Socket("ws:localhost:8000");
  let username = "";
  // 初始化函数
  const init = () => {
    bindEvent();
  };
  // 事件绑定函数
  function bindEvent() {
    oSendBtn.addEventListener("click", handleSendBtnClick, false);
    // WebSocket执行回调 方法一
    /* 
    ws.onopen = function () {};
    ws.onclose = function () {};
    ws.onerror = function () {};
    ws.onmessage = function () {}; 
    */

    // WebSocket执行回调 方法二
    ws.addEventListener("open", handleWsOpen, false);
    ws.addEventListener("close", handleWsClose, false);
    ws.addEventListener("error", handleWsError, false);
    ws.addEventListener("message", handleWsMessage, false);
  }
  // 发送按钮的处理函数
  function handleSendBtnClick(e) {
    const msg = oMsg.value;
    if (!msg.trim().length) return;
    // 给后端发送数据
    ws.send(
      JSON.stringify({
        user: username,
        dateTime: new Date().getTime(),
        message: msg,
      })
    );
    oMsg.value = "";
  }
  function handleWsOpen(e) {
    console.log("websocket open", e);
    username = storage.getItem("username");
    if (!username) {
      location.href = "entry.html";
      return;
    }
  }
  function handleWsClose(e) {
    console.log("websocket close", e);
  }
  function handleWsError(e) {
    console.log("websocket error", e);
  }
  // 这里接收后端send过来的数据
  function handleWsMessage(e) {
    console.log("websocket message", e);
    const msgData = JSON.parse(e.data);
    // 创建每个用户发送的消息
    oList.appendChild(createMsg(msgData));
  }
  function createMsg(data) {
    const { user, dateTime, message } = data;
    const oItem = doc.createElement("li");
    oItem.innerHTML = `
      <p>
        <span>${user}</span>
        <i>${new Date(dateTime)}</i>
      </p>
      <p>
        <strong>消息：${message}</strong>
      </p>
    `;
    return oItem;
  }

  init();
})(document, WebSocket, localStorage, location);

补充知识点：
立即执行函数有两种写法：

(function(){})() 匿名函数包裹在一个括号运算符中，后面再跟一个小括号
(function(){}()) 匿名函数后面跟一个小括号，然后整个包裹在一个括号运算符中

不理解的参考文章深入理解js立即执行函数

对于html页面的设计很简单，body里面：

<ul id="list"></ul>
<input type="text" id="message" placeholder="请输入消息">
<button id="send">发送</button>

四、WebSocket服务端

服务端，我使用的是Node.js，并且使用ws库。

1. WebSocket Server对应的事件

事件	描述
open	连接建立时触发
error	通信发生错误时触发
close	连接关闭时触发
connection	如果有WebSocket请求接入，`wsServer`对象可以响应`connection`事件来处理这个WebSocket，其对应的回调函数会传入一个WebSocket的实例，表示这个WebSocket连接。当connection成功后，在connection的回调里面绑定传入来的WebSocket的实例的message事件，ws.on(‘message’,回调函数)
message	前端WebSocket实例send过来的数据将在message的回调中接收，前端send后，message回调执行。注意：这里是WebSocket的实例的message事件

2. 后端对应的服务器代码

首先建立一个文件夹，然后在当前目录下打开终端，初始化项目
```
npm init -y
```
安装WebSocket的封装库ws
```
npm install ws
```

创建文件index.js，在里面写后端Node.js代码创建服务器

// 导入ws
const Ws = require("ws");
((Ws) => {
  // 在8000端口开启WebSocket Server
  const wsServer = new Ws.Server({ port: 8000 });

  // 初始化
  const init = () => {
    bindEvent();
  };

  function bindEvent() {
    // 与前端区别：这里绑定定中无message有connection，其中的message应该在connection里绑定
    // 后端中WebSocket Server的事件
    wsServer.on("open", handleOpen);
    wsServer.on("close", handleClose);
    wsServer.on("error", handleError);
    wsServer.on("connection", handleConnection);
  }
  function handleOpen() {
    console.log("WebSocket Open");
  }
  function handleClose() {
    console.log("WebSocket Close");
  }
  function handleError() {
    console.log("WebSocket Error");
  }
  function handleConnection(ws) {
    console.log("WebSocket connected");
    // 后端的message是在connection里绑定
    // 绑定的是传入的参数WebSocket实例的message事件
    ws.on("message", handleMessage);
  }
  // 这里收到前端发送过来的message
  function handleMessage(msg) {
    // 广播收到的消息给每个客户端
    wsServer.clients.forEach(function (client) {
      // 这里发送给前端消息
      client.send(msg);
    });
  }
  init();
})(Ws);

五、参考链接

http://www.ruanyifeng.com/blog/2017/05/websocket.html

https://www.cnblogs.com/jingmoxukong/p/7755643.html

https://www.liaoxuefeng.com/wiki/1022910821149312/1103303693824096

posted @ 2022-11-15 14:05 你就是星光阅读(990) 评论(0) 收藏举报

刷新页面返回顶部

你就是星光