JavaScript内核与高级编程之：`WebSockets`：其在`Node.js`中的双向通信与握手协议。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位听众，大家好！欢迎来到“JavaScript内核与高级编程”系列讲座。今天，咱们来聊聊一个让Web开发变得更刺激、更实时的话题：WebSockets，以及它在Node.js中的应用。先打个招呼，今天讲的有点多，大家坐稳扶好，可别掉队了！

第一部分：WebSockets：让浏览器和服务器“谈恋爱”

想象一下，传统的HTTP请求就像你给女神写情书，写完寄出去，然后傻乎乎地等着回信。女神回不回，什么时候回，你都得被动等待。而WebSockets呢，就像你和女神加了微信，可以随时你一句我一句地聊天，简直是“天涯共此时，消息秒到达”。

1.1 HTTP的单向性 vs. WebSockets的双向性

用人话说，HTTP是“你问我答”，WebSockets是“你来我往”。具体区别，咱们用表格说话：

特性	HTTP	WebSockets
通信模式	单向，请求-响应	双向，全双工
连接状态	无状态，每次请求都需要建立连接	有状态，建立连接后保持长连接
数据传输	每次请求都包含头部信息	建立连接后，头部信息开销较小
适用场景	适用于静态内容、非实时数据	适用于实时应用，如聊天、游戏等

HTTP虽然可靠，但每次请求都要重新建立连接，效率低下。WebSockets只需要建立一次连接，就可以持续地双向通信，大大降低了延迟，提升了实时性。

1.2 WebSockets的“握手”仪式：从HTTP到WebSocket的华丽转身

要让浏览器和服务器“谈恋爱”，首先得有个“握手”仪式，确认双方的身份和意图。这个“握手”过程实际上是一个特殊的HTTP请求。

客户端发起“握手”请求：

// 浏览器端的JavaScript代码
let socket = new WebSocket('ws://example.com/socketserver');

socket.onopen = function(event) {
  console.log('WebSocket连接已建立！');
  socket.send('你好，服务器！'); // 开始发送数据
};

socket.onmessage = function(event) {
  console.log('收到服务器的消息：', event.data);
};

socket.onclose = function(event) {
  console.log('WebSocket连接已关闭。');
};

socket.onerror = function(error) {
  console.error('WebSocket发生错误：', error);
};

浏览器会发送一个包含Upgrade和Connection头的HTTP请求到服务器，类似下面这样：

GET /socketserver HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13

Upgrade: websocket：告诉服务器，我想升级到WebSocket协议。
Connection: Upgrade：告诉服务器，我想升级连接。
Sec-WebSocket-Key：一个随机生成的密钥，用于服务器验证。
Sec-WebSocket-Version：WebSocket协议的版本号。
服务器回应“握手”请求：

服务器收到请求后，会验证Sec-WebSocket-Key，并生成一个对应的Sec-WebSocket-Accept值，然后发送一个HTTP 101 Switching Protocols响应，告诉客户端“握手”成功。

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

Sec-WebSocket-Accept：服务器对客户端密钥进行特定算法加密后的值，用于验证服务器的身份。

握手成功后，HTTP连接就升级成了WebSocket连接，双方就可以通过这个连接进行双向通信了。

第二部分：Node.js与WebSockets：让服务器“舞动”起来

Node.js天生就适合处理I/O密集型任务，而WebSockets正好需要服务器能够高效地处理大量的并发连接。所以，Node.js和WebSockets简直是天生一对，地造一双。

2.1 选择WebSocket库：ws还是socket.io？

在Node.js中，有很多WebSocket库可供选择，其中最流行的两个是ws和socket.io。

ws： 简单、轻量级，专注于实现WebSocket协议本身。就像一个纯粹的跑车，速度快，性能好，但需要你自己手动处理很多细节。
socket.io： 功能更强大，提供了很多高级特性，如自动重连、房间、广播等。就像一个豪华轿车，舒适性好，功能齐全，但性能相对较弱。

如何选择？如果你追求极致的性能，对WebSocket协议非常熟悉，可以选择ws。如果你希望快速开发，需要一些高级特性，可以选择socket.io。

2.2 使用ws模块：从“Hello, WebSocket!”开始

咱们先来用ws模块写一个简单的WebSocket服务器。

安装ws模块：

npm install ws

编写服务器代码：

// server.js
const WebSocket = require('ws');

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

wss.on('connection', ws => {
  console.log('客户端已连接！');

  ws.on('message', message => {
    console.log('收到客户端的消息：', message);
    ws.send(`服务器收到了你的消息：${message}`);
  });

  ws.on('close', () => {
    console.log('客户端已断开连接。');
  });

  ws.on('error', error => {
    console.error('发生错误：', error);
  });

  ws.send('欢迎连接到WebSocket服务器！');
});

console.log('WebSocket服务器已启动，监听端口8080');

这个代码非常简单：

WebSocket.Server：创建一个WebSocket服务器。
wss.on('connection', ...)：监听客户端连接事件，当有客户端连接时，会执行回调函数。
ws.on('message', ...)：监听客户端发送的消息事件，当客户端发送消息时，会执行回调函数。
ws.send(...)：向客户端发送消息。
ws.on('close', ...)：监听客户端断开连接事件。
ws.on('error', ...)：监听错误事件。
运行服务器：

node server.js

编写客户端代码： (使用浏览器端的JavaScript代码，如上面的例子)

打开浏览器，运行客户端代码，你就可以看到控制台中打印出服务器发送的消息，并且可以向服务器发送消息，服务器也会回应你。恭喜你，你已经成功地建立了一个WebSocket连接！

2.3 使用socket.io模块：让通信更“智能”

socket.io 提供了更高级的功能，比如命名空间、房间、广播等，可以让你更方便地构建复杂的实时应用。

安装socket.io模块：

npm install socket.io

编写服务器代码：

// server.js
const { Server } = require("socket.io");

const io = new Server(8080, {
  cors: {
    origin: "*", // 允许所有来源的跨域请求
    methods: ["GET", "POST"]
  }
});

io.on("connection", (socket) => {
  console.log('客户端已连接，socket id：', socket.id);

  socket.emit("welcome", "欢迎来到socket.io的世界！");

  socket.on("message", (data) => {
    console.log('收到客户端的消息：', data);
    io.emit("message", `服务器：${data}`); //广播消息
  });

  socket.on("disconnect", () => {
    console.log('客户端已断开连接。');
  });
});

console.log('socket.io服务器已启动，监听端口8080');

编写客户端代码：

<!DOCTYPE html>
<html>
<head>
  <title>Socket.IO Client</title>
</head>
<body>
  <h1>Socket.IO Client</h1>
  <input type="text" id="messageInput" placeholder="输入消息">
  <button onclick="sendMessage()">发送</button>
  <ul id="messageList"></ul>

  <script src="https://cdn.socket.io/4.6.0/socket.io.min.js" integrity="sha384-c79GN5VsunZofHntIp97PjRYLxZcE8k5D6y/EcCpLKiuqrwF+qw0jAYIAd6ZCJFn" crossorigin="anonymous"></script>
  <script>
    const socket = io("http://localhost:8080");

    socket.on("connect", () => {
      console.log("Connected to server!");
    });

    socket.on("welcome", (data) => {
      console.log('收到服务器的欢迎消息：', data);
      addMessage(data);
    });

    socket.on("message", (data) => {
      console.log('收到服务器的消息：', data);
      addMessage(data);
    });

    function sendMessage() {
      const messageInput = document.getElementById("messageInput");
      const message = messageInput.value;
      socket.emit("message", message);
      messageInput.value = "";
    }

    function addMessage(message) {
      const messageList = document.getElementById("messageList");
      const li = document.createElement("li");
      li.textContent = message;
      messageList.appendChild(li);
    }
  </script>
</body>
</html>

这个例子中，我们使用了socket.io的广播功能，当一个客户端发送消息时，服务器会将消息广播给所有连接的客户端。

第三部分：WebSockets的应用场景：让你的创意“飞起来”

WebSockets的应用场景非常广泛，只要你需要实时性，就可以考虑使用WebSockets。

实时聊天应用： 这是WebSockets最经典的应用场景。你可以使用WebSockets构建一个实时的聊天应用，让用户可以实时地发送和接收消息。
在线游戏： WebSockets可以提供低延迟的通信，非常适合构建在线游戏。
实时数据监控： 你可以使用WebSockets将服务器上的实时数据推送给客户端，比如股票行情、服务器状态等。
协作工具： WebSockets可以用于构建协作工具，比如在线文档编辑、代码协同等。
物联网(IoT)： WebSockets可以用于连接物联网设备，实现实时的数据传输和控制。

第四部分：WebSockets的挑战与解决方案：让你的应用更“坚固”

WebSockets虽然强大，但也面临一些挑战。

连接稳定性： 网络不稳定可能会导致WebSocket连接断开。可以使用自动重连机制，当连接断开时，自动重新建立连接。socket.io内置了自动重连功能，ws需要手动实现。
安全性： WebSocket连接可能会受到攻击，比如跨站WebSocket劫持(CSWSH)。可以使用SSL/TLS加密连接，防止中间人攻击。同时，需要对客户端发送的数据进行验证，防止恶意数据。
扩展性： 当用户量增加时，单台服务器可能无法承受大量的WebSocket连接。可以使用负载均衡，将WebSocket连接分发到多台服务器上。

第五部分：一些额外的“小贴士”

心跳检测： 为了保持连接的活跃性，可以定期发送心跳包，检测连接是否仍然有效。
协议选择： 除了WebSocket协议，还有其他实时通信协议，比如Server-Sent Events(SSE)。可以根据实际需求选择合适的协议。SSE是服务器向客户端单向推送数据的协议，适用于不需要客户端向服务器发送数据的场景。
数据格式： WebSocket可以传输文本数据和二进制数据。可以根据实际需求选择合适的数据格式。

总结：

今天，我们一起探索了WebSockets的世界，从HTTP的单向性到WebSockets的双向性，从ws到socket.io，从简单的“Hello, WebSocket!”到复杂的实时应用，我们一步一个脚印，了解了WebSockets的原理、应用和挑战。希望通过今天的讲座，你能对WebSockets有更深入的理解，并在实际项目中灵活运用它，创造出更精彩的Web应用。

好了，今天的讲座就到这里。感谢大家的参与！记住，编程的世界没有终点，只有不断学习和探索，才能成为真正的编程大师！下次再见！

发表回复 取消回复

发表回复取消回复