WebSockets - 实现双工通信

WebSockets 是 HTML5 开始支持的一种全新协议，它实现了客户端和服务器端的双向通信，可以用于实时数据传输和通讯应用。

传统 HTTP 协议的缺点

在传统的 HTTP 协议中，客户端请求一次，服务器端只能做出一次响应，整个请求过程是一个单向的，无法实现实时数据传输和通信。

WebSockets 的优点

• 双向通信：客户端和服务器端可同时发送和接受数据，实现真正的双向通信。
• 实时性：相对于传统的 HTTP 请求每次都需要重新建立连接，WebSockets 可以实现建立一次连接后实时通信，相应速度更快。
• 协议标准化：WebSockets 的标准化协议由 IETF 维护，具有跨平台、跨语言的特性，易于开发和维护。

WebSockets 协议

WebSockets 建立在 HTTP 协议之上，通过特定的 Upgrade 请求进行升级，之后就可以使用 WebSockets 协议进行双向数据通信。

在建立连接后，客户端和服务器端都可以主动向对方发送消息，消息可以是字符串或二进制数据。

实现 WebSockets

客户端

在客户端可以使用原生 JavaScript，或者第三方库 Socket.IO 来实现 WebSockets 连接。

使用原生 JavaScript

var ws = new WebSocket("wss://example.com/path");

ws.onopen = function() {
  console.log("连接已建立...");
  ws.send("Hello Server!");
};

ws.onmessage = function(event) {
  console.log("接收到来自服务器的消息：", event.data);
};

ws.onclose = function() {
  console.log("连接已关闭...");
};

使用 Socket.IO

var socket = io("wss://example.com/path");

socket.on("connect", function() {
  console.log("连接已建立...");
  socket.emit("message", "Hello Server!");
});

socket.on("message", function(data) {
  console.log("接收到来自服务器的消息：", data);
});

socket.on("disconnect", function() {
  console.log("连接已关闭...");
});

服务器端

在服务器端，可以使用 Node.js 自带的 ws 模块来实现 WebSockets 连接。

const WebSocket = require("ws");

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

wss.on("connection", function(ws) {
  console.log("客户端已连接...");

  ws.on("message", function(message) {
    console.log(`接收到来自客户端的消息: ${message}`);
    ws.send("Hello Client!");
  });

  ws.on("close", function() {
    console.log("客户端已断开连接...");
  });
});

总结

WebSockets 是实现双向通信的一个重要技术，在实时数据传输和通讯应用中具有广泛的应用。通过客户端和服务器端的配合实现双向通信，可以提高应用的效率和用户体验。