javascript_WebSocket实时通信-js教程-PHP中文网

javascript_WebSocket实时通信

夢幻星辰

发布： 2025-12-04 18:56:02

原创

373人浏览过

WebSocket通过一次HTTP握手将协议升级为全双工通信，允许客户端与服务器实时交换数据。前端使用原生API创建连接、监听事件并发送消息，后端如Node.js配合ws库处理连接与广播。需注意重连机制、连接状态检查、使用wss加密、消息节流及服务端资源释放，以保障稳定性和安全性。

javascript_websocket实时通信

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它允许客户端和服务器之间进行实时、低延迟的数据交换。相比传统的 HTTP 请求-响应模式，WebSocket 更适合需要频繁交互的应用场景，比如聊天室、在线协作、实时数据监控等。

WebSocket 的基本原理

WebSocket 通过一次 HTTP 握手建立连接后，将协议从 HTTP 升级为 WebSocket（使用 Upgrade: websocket 头），之后通信双方可以随时发送数据，不再受限于请求-响应模式。

在 JavaScript 中，浏览器提供了原生的 WebSocket API，使用简单直观：

创建 WebSocket 实例时指定服务器地址（以 ws:// 或 wss:// 开头）
监听打开、消息、关闭和错误事件
通过 send() 方法向服务端发送数据

前端实现 WebSocket 通信

以下是一个简单的前端代码示例：

立即学习“Java免费学习笔记（深入）”；

XAnswer

XAnswer是一款可以生成思维导图的AI搜索工具，聚合全网优质信息源，结合LLM能力和RAG技术，为用户提供实时性的搜索结果、个性化的答案呈现。

查看详情

const socket = new WebSocket('ws://localhost:8080');

socket.onopen = function(event) {
  console.log('连接已建立');
  socket.send('你好，服务器！');
};

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

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

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

登录后复制

服务端配合（Node.js 示例）

前端的 WebSocket 需要后端支持。使用 Node.js 可借助 ws 库快速搭建服务端：

const WebSocket = require('ws');

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

server.on('connection', function(socket) {
  console.log('客户端已连接');

  socket.on('message', function(data) {
    console.log('收到：', data.toString());
    // 广播给所有客户端
    server.clients.forEach(function(client) {
      if (client.readyState === WebSocket.OPEN) {
        client.send('广播：' + data);
      }
    });
  });

  socket.on('close', function() {
    console.log('客户端断开');
  });
});

登录后复制