前端开发者如何入门WebSocket？掌握这些即可

前端

2023-10-24 07:43:30

WebSocket，全称WebSocket Protocol，中文名网络套接字协议，是一种基于TCP协议的全双工通信协议。它允许服务器主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

WebSocket 于 2008 年诞生，2011 年成为国际标准。它之所以备受关注，主要是因为它解决了HTTP协议只能由客户端主动发起请求的缺点，使得服务器可以主动向客户端推送信息，实现真正的实时通信。

WebSocket 的应用场景非常广泛，比如：

在线聊天 ：WebSocket 可以用于构建在线聊天系统，使客户端和服务器可以实时通信。
多人游戏 ：WebSocket 可以用于构建多人游戏，使玩家可以实时互动。
实时数据更新 ：WebSocket 可以用于构建实时数据更新系统，使客户端可以实时接收服务器推送的数据。
金融数据推送 ：WebSocket 可以用于构建金融数据推送系统，使客户端可以实时接收金融市场的数据。

WebSocket入门

要使用WebSocket，我们需要先在服务器端和客户端分别进行配置。

服务器端配置

服务器端可以使用各种语言和框架来实现WebSocket服务器。这里我们以Node.js为例进行介绍。

// 引入WebSocket库
const WebSocket = require('ws');

// 创建WebSocket服务器
const server = new WebSocket.Server({ port: 8080 });

// 当有客户端连接时触发
server.on('connection', (socket) => {
  console.log('有客户端连接');

  // 当客户端发送消息时触发
  socket.on('message', (message) => {
    console.log('收到客户端消息：', message);

    // 向客户端发送消息
    socket.send('服务器消息：Hello, client!');
  });

  // 当客户端断开连接时触发
  socket.on('close', () => {
    console.log('客户端断开连接');
  });
});

// 启动WebSocket服务器
server.listen();

客户端配置

客户端可以使用各种语言和框架来实现WebSocket客户端。这里我们以JavaScript为例进行介绍。

// 创建WebSocket连接
const socket = new WebSocket('ws://localhost:8080');

// 当WebSocket连接打开时触发
socket.onopen = () => {
  console.log('WebSocket连接已打开');

  // 向服务器发送消息
  socket.send('客户端消息：Hello, server!');
};

// 当WebSocket连接收到消息时触发
socket.onmessage = (event) => {
  console.log('收到服务器消息：', event.data);
};

// 当WebSocket连接关闭时触发
socket.onclose = () => {
  console.log('WebSocket连接已关闭');
};

// 当WebSocket连接发生错误时触发
socket.onerror = (error) => {
  console.log('WebSocket连接发生错误：', error);
};