JavaScript_实时通信与Socket编程-js教程-PHP中文网

JavaScript_实时通信与Socket编程

夢幻星辰

发布： 2025-11-22 21:16:33

原创

914人浏览过

WebSocket和Socket.IO实现Web实时通信，适用于聊天、协作等场景；前者基于标准协议，后者兼容性更强，支持降级通信，需注意安全与高并发处理。

javascript_实时通信与socket编程

实时通信在现代Web应用中越来越重要，比如聊天室、在线协作工具、实时通知和多人游戏等场景。JavaScript 通过 Socket 编程实现客户端与服务器之间的双向实时通信，突破了传统 HTTP 请求-响应模式的限制。

WebSocket：原生支持实时通信

WebSocket 是 HTML5 提供的一种全双工通信协议，允许客户端和服务器之间建立持久连接，双方可以随时发送数据。

使用原生 WebSocket API 非常简单：

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

// 连接成功时触发
socket.onopen = function(event) {
  socket.send('客户端已连接');
};

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

// 处理错误
socket.onerror = function(error) {
  console.error('连接出错：', error);
};

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

登录后复制

在服务器端（Node.js），可以使用 ws 库来搭建 WebSocket 服务：

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

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

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

  socket.on('message', (data) => {
    console.log('收到:', data.toString());
    // 向所有客户端广播消息
    server.clients.forEach(client => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(`广播：${data}`);
      }
    });
  });
});

登录后复制

Socket.IO：更强大的实时通信库

虽然 WebSocket 很强大，但在某些网络环境（如代理、防火墙）下可能不被支持。Socket.IO 在 WebSocket 基础上提供了降级机制（如轮询），并增强了功能，更适合复杂项目。

v7.0.0603UsualToolCMS大众版

UsualToolCMS 是一款企业级的网站内容管理系统，由PHP+MYSQL编写，使用模板分离技术，支持创建多种类型的站点。拥有UsualToolCMS便能快速同时在手机端与电脑端建立网站，通过UsualToolCMS能快速接入公众号，快速生成一个微信小程序及WEBAPP，真正的多站合一。互联网技术变得更简单。升级说明： UsualToolCMS7.0.0604增加文字/图片自动水印系

查看详情

Socket.IO 分为服务端和客户端两部分，使用起来非常直观：

// 服务端代码（Node.js + socket.io）
const io = require('socket.io')(3000);

io.on('connection', (socket) => {
  console.log('用户上线');

  socket.on('chat message', (msg) => {
    // 广播给所有人（包括自己）
    io.emit('chat message', msg);
  });

  socket.on('disconnect', () => {
    console.log('用户断开连接');
  });
});

登录后复制

前端引入 Socket.IO 客户端库：

<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io();

  socket.on('connect', () => {
    console.log('连接成功');
  });

  socket.on('chat message', (msg) => {
    const div = document.createElement('div');
    div.textContent = msg;
    document.getElementById('messages').<a style="color:#f60; text-decoration:underline;" title="app" href="https://www.php.cn/zt/16186.html" target="_blank">app</a>endChild(div);
  });

  function sendMessage() {
    const input = document.getElementById('messageInput');
    socket.emit('chat message', input.value);
    input.value = '';
  }
</script>

登录后复制