JavaScriptWebSocket_实时通信应用开发-js教程-PHP中文网

JavaScriptWebSocket_实时通信应用开发

夜晨

发布： 2025-11-23 22:54:06

原创

752人浏览过

WebSocket通过单个TCP连接实现全双工通信，适用于实时场景如聊天室和行情推送；相比HTTP轮询，其延迟低、负载小；浏览器使用原生API创建连接并监听open、message、error、close事件以收发消息和处理状态；服务端可用Node.js的ws库搭建，支持广播消息给所有客户端；需关注连接状态readyState及错误重连机制，确保通信稳定。

javascriptwebsocket_实时通信应用开发

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，特别适合需要实时交互的应用场景，比如聊天室、在线协作、股票行情推送等。相比传统的 HTTP 轮询，WebSocket 能显著降低延迟和服务器负载。

建立 WebSocket 连接

在浏览器端，JavaScript 提供了原生的 WebSocket API，使用非常简单：

const socket = new WebSocket('ws://localhost:8080');
<p>socket.addEventListener('open', (event) => {
console.log('连接已建立');
socket.send('客户端上线');
});</p>

登录后复制

注意 URL 协议是 ws（非加密）或 wss（加密），类似于 HTTPS。

处理消息收发

通过监听 message 事件接收服务器推送的数据：

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

国洋商务通

Gyb2b V1.01免费版可终身使用,是一款功能强大的B2B电子商务应用软件。该软件不仅更新和修改了V1.0相关功能，更是采用了目前互联网上最流行的LAMP组合（Linux+Apache+Mysql+PHP）开发完成，模板技术实现了界面与代码的有效分离，用户可以快速地在此基础上编译模板；提供B2B电子商务应用最常见的求购、供应、商品、公司库、行业资讯、商圈、资信认证、在线交易、交易评分、留言、搜

查看详情

socket.addEventListener('message', (event) => {
  console.log('收到消息:', event.data);
});

登录后复制

发送消息只需调用 send() 方法：

function sendMessage() {
  const input = document.getElementById('messageInput');
  socket.send(input.value);
  input.value = '';
}

登录后复制

服务端实现（Node.js + ws 库）

使用 Node.js 搭建 WebSocket 服务端，推荐 ws 库：

const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });
<p>server.on('connection', (socket) => {
console.log('客户端已连接');</p><p>socket.on('message', (data) => {
console.log('收到:', data);
// 广播给所有客户端
server.clients.forEach((client) => {
if (client.readyState === WebSocket.OPEN) {
client.send(data);
}
});
});</p><p>socket.on('close', () => {
console.log('客户端断开');
});
});</p>

登录后复制

错误处理与连接状态管理

实际开发中必须监听错误和连接状态变化：

socket.addEventListener('error', (event) => {
  console.error('连接出错:', event);
});
<p>socket.addEventListener('close', (event) => {
console.log('连接关闭', event.code, event.reason);
// 可在此实现重连逻辑
setTimeout(() => connect(), 3000);
});</p>

登录后复制

检查 socket.readyState 可判断当前状态：
0 - CONNECTING
1 - OPEN
2 - CLOSING
3 - CLOSED

基本上就这些。掌握连接建立、消息通信、异常处理和服务端广播，就能快速开发出稳定的实时应用。关键是保持连接稳定，合理处理断线重连。不复杂但容易忽略细节。基本上就这些。

以上就是JavaScriptWebSocket_实时通信应用开发的详细内容，更多请关注php中文网其它相关文章！