WebSocket 详细教程

WebSocket 是一种网络通信协议，它实现了客户端与服务器之间的全双工通信。与传统的 HTTP 协议不同，WebSocket 允许服务器主动向客户端发送消息，这对于实时应用（如在线聊天、股票交易、游戏等）来说非常重要。

1. 工作原理

WebSocket 的工作原理如下：

1. 客户端向服务器发送一个 HTTP 请求，请求建立 WebSocket 连接。
2. 服务器收到请求后，会返回一个 HTTP 响应，响应中包含一个 101 Switching Protocols 状态码，表示同意建立 WebSocket 连接。
3. 服务器和客户端通过 TCP 连接进行通信，数据格式为 JSON、二进制或文本。

2. 优点

WebSocket 相比 HTTP 协议有以下优点：

1. 实时性：服务器可以主动向客户端发送消息，实现实时通信。
2. 双向通信：客户端和服务器之间可以同时发送和接收数据。
3. 性能：WebSocket 连接建立后，数据传输效率更高，减少了 HTTP 请求的次数。
4. 兼容性：WebSocket 协议在大多数浏览器中得到了支持，无需额外插件。

3. 实现

实现 WebSocket 通信通常需要使用 JavaScript 和后端语言（如 Node.js、Python、Java 等）。以下是一个简单的 WebSocket 实现示例：

客户端（JavaScript）

// 创建 WebSocket 连接
const socket = new WebSocket('ws://localhost:8080');
// 连接打开时触发
socket.onopen = function(event) {
  console.log('连接成功');
};
// 接收到服务器消息时触发
socket.onmessage = function(event) {
  console.log('收到消息：', event.data);
};
// 连接关闭时触发
socket.onclose = function(event) {
  console.log('连接关闭');
};
// 连接出错时触发
socket.onerror = function(error) {
  console.log('连接出错：', error);
};
// 发送消息到服务器
function sendMessage(message) {
  socket.send(message);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

服务器端（Node.js）

const WebSocket = require('ws');
// 创建 WebSocket 服务器实例
const wss = new WebSocket.Server({ port: 8080 });
// 监听连接事件
wss.on('connection', function(socket) {
  console.log('新连接');
  // 监听接收消息事件
  socket.on('message', function(message) {
    console.log('收到消息：', message);
  });
  // 发送消息到客户端
  function sendMessageToClient(message) {
    socket.send(message);
  }
  // 每隔1秒向客户端发送消息
  setInterval(() => {
    sendMessageToClient('服务器消息');
  }, 1000);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

4. API

WebSocket 提供了以下 API：

1. WebSocket()：创建一个新的 WebSocket 连接。
2. open()：连接成功打开时触发。
3. onmessage：接收到服务器消息时触发。
4. send()：向服务器发送消息。
5. close()：关闭 WebSocket 连接。

5. 示例应用

WebSocket 广泛应用于各种实时应用，如在线聊天、股票交易、游戏等。以下是一个简单的在线聊天示例：

客户端（JavaScript）

// 创建 WebSocket 连接
const socket = new WebSocket('ws://localhost:8080');
// 连接打开时触发
socket.onopen = function(event) {
  console.log('连接成功');
};
// 接收到服务器消息时触发
socket.onmessage = function(event) {
  const message = document.createElement('div');
  message.textContent = '服务器：' + event.data;
  document.body.appendChild(message);
};
// 连接关闭时触发
socket.onclose = function(event) {
  console.log('连接关闭');
};
// 连接出错时触发
socket.```
socket.onerror = function(error) {
  console.log('连接出错：', error);
};
// 发送消息到服务器
function sendMessage(message) {
  socket.send(message);
}
// 在输入框中添加发送按钮
const input = document.createElement('input');
input.type = 'text';
input.placeholder = '输入消息';
input.addEventListener('input', function(event) {
  sendMessage(event.target.value);
});
document.body.appendChild(input);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

服务器端（Node.js）

const WebSocket = require('ws');
// 创建 WebSocket 服务器实例
const wss = new WebSocket.Server({ port: 8080 });
// 监听连接事件
wss.on('connection', function(socket) {
  console.log('新连接');
  // 监听接收消息事件
  socket.on('message', function(message) {
    console.log('收到消息：', message);
    // 广播消息给所有客户端
    wss.clients.forEach(function each(client) {
      if (client !== socket && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
  // 发送消息到客户端
  function sendMessageToClient(message) {
    socket.send(message);
  }
  // 每隔1秒向客户端发送消息
  setInterval(() => {
    sendMessageToClient('服务器消息');
  }, 1000);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

6. 安全性

WebSocket 协议本身是安全的，但你需要确保 WebSocket 连接是通过 HTTPS 协议建立的，以防止中间人攻击。在 Node.js 中，你可以使用 wss 模块来创建一个安全的 WebSocket 服务器。

7. 总结

WebSocket 是一种强大的网络通信协议，它允许服务器和客户端之间进行实时、双向通信。在 WebSocket 连接中，服务器可以主动向客户端发送消息，这对于实时应用来说非常重要。通过使用 JavaScript 和后端语言，你可以轻松实现 WebSocket 通信。在实际应用中，WebSocket 已被广泛应用于在线聊天、股票交易、游戏等领域。