如何利用JavaScript的WebSocket实现实时数据推送？-js教程-PHP中文网

如何利用JavaScript的WebSocket实现实时数据推送？

幻影之瞳

发布： 2025-10-03 13:00:02

原创

933人浏览过

WebSocket是一种在单个TCP连接上提供全双工通信的网络协议，通过ws://或wss://建立持久化连接，实现浏览器与服务器间的实时双向数据传输。1. 与HTTP不同，WebSocket连接建立后，客户端和服务器均可主动发送数据，适用于聊天、通知、行情等实时场景。2. 前端使用原生JavaScript的WebSocket对象连接服务器，通过onopen、onmessage、onerror、onclose事件处理连接状态、接收消息、错误及关闭逻辑，并可向页面动态更新内容。3. 后端可用Node.js的ws库搭建服务，监听指定端口，处理客户端连接与消息，并支持广播机制将消息推送给所有活跃客户端。4. 实际应用中需注意连接状态管理以实现断线重连，引入心跳机制防止超时断开，生产环境使用wss加密并校验origin提升安全性，多实例部署时结合Redis等中间件实现跨节点消息同步。正确配置下，WebSocket相较轮询具有更低延迟和更高效率，关键在于稳定连接与异常处理。

如何利用javascript的websocket实现实时数据推送？

要实现网页端的实时数据推送，WebSocket 是最常用的技术之一。它能在浏览器和服务器之间建立持久的双向通信通道，让数据可以即时传输，适用于聊天应用、实时通知、股票行情等场景。

1. 什么是 WebSocket？

WebSocket 是一种网络协议，通过 ws://（非加密）或 wss://（加密）连接，在单个 TCP 连接上提供全双工通信。与传统的 HTTP 请求不同，WebSocket 连接一旦建立，客户端和服务器都可以随时主动发送数据。

2. 前端使用 JavaScript 创建 WebSocket 连接

在浏览器中，可以通过原生的 WebSocket 对象轻松连接到服务器：

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

// 连接成功时触发
socket.onopen = function(event) {
  console.log('WebSocket 连接已建立');
  // 可以在这里发送初始消息
  socket.send('用户已上线');
};

// 接收服务器推送的消息
socket.onmessage = function(event) {
  console.log('收到消息:', event.data);
  // 更新页面内容，例如显示通知
  document.getElementById('output').innerHTML += '<p>' + event.data + '</p>';
};

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

// 连接关闭时
socket.onclose = function(event) {
  console.log('连接已关闭', event.code, event.reason);
};

登录后复制

3. 后端使用 Node.js 搭建 WebSocket 服务

可以使用 Node.js 的 ws 库快速搭建一个 WebSocket 服务器。

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

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

// 安装 ws 库

npm install ws

登录后复制

// 服务器代码（server.js）

const WebSocket = require('ws');

// 创建 WebSocket 服务器，监听 8080 端口
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  console.log('有新客户端连接');

  // 监听来自客户端的消息
  ws.on('message', function(data) {
    console.log('收到:', data);

    // 广播给所有连接的客户端
    wss.clients.forEach(function each(client) {
      if (client.readyState === WebSocket.OPEN) {
        client.send(`广播: ${data}`);
      }
    });
  });

  // 发送欢迎消息
  ws.send('欢迎进入 WebSocket 服务！');
});

登录后复制