JavaScriptWebSocket应用_JavaScript实时通信方案-js教程-PHP中文网

JavaScriptWebSocket应用_JavaScript实时通信方案

紅蓮之龍

发布： 2025-12-01 19:18:07

原创

776人浏览过

WebSocket是一种基于TCP的全双工通信协议，适用于实时Web应用，相比轮询显著降低延迟和负载。通过JavaScript的原生API可直接创建连接：const socket = new WebSocket('ws://localhost:8080');并监听onopen、onmessage、onclose和onerror事件处理通信过程。发送消息使用socket.send()方法，支持字符串、Blob或ArrayBuffer。服务端常用Node.js库实现，如轻量高效的ws库：const WebSocket = require('ws');const wss = new WebSocket.Server({ port: 8080 });wss.on('connection', function connection(ws) { ws.on('message', function incoming(message) { wss.clients.forEach(function each(client) { if (client !== ws && client.readyState === WebSocket.OPEN) { client.send(message); } }); }); });或功能丰富的Socket.IO，支持自动重连、房间管理等。服务端示例：const io = require('socket.io')(8080);io.on('connection', (socket) => { socket.on('chat message', (msg) => { io.emit('chat message', msg); }); });客户端引入<script src="/socket.io/socket.io.js"></script>后使用const socket = io('http://localhost:8080');接收和发送消息。典型应用场景包括聊天应用、实时通知、协同编辑、在线游戏和数据监控面板，均依赖低延迟双向通信提升体验。

javascriptwebsocket应用_javascript实时通信方案

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，特别适合需要实时交互的 Web 应用。相比传统的轮询或长轮询方式，WebSocket 能显著降低延迟和服务器负载，是实现 JavaScript 实时通信的核心技术之一。

WebSocket 基本使用方法

在浏览器端，JavaScript 提供了原生的 WebSocket API，使用起来非常直接。

创建连接：

通过 new WebSocket(url) 即可建立与服务端的 WebSocket 连接。URL 通常以 ws:// 或 wss:// 开头。

示例代码：

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

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

socket.onopen = function(event) {
  console.log('连接已建立');
};

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

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

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

登录后复制

发送消息：

使用 socket.send() 方法向服务端发送数据，支持字符串、Blob 或 ArrayBuffer。

socket.send('Hello Server!');

登录后复制

服务端实现方案

要支持 WebSocket，服务端也需要相应实现。常见 Node.js 框架中，ws 和 Socket.IO 是两个主流选择。

使用 ws 库（轻量高效）：

ws 是一个简洁高效的 WebSocket 库，适合自定义通信逻辑。

Invoice Ninja

Invoice Ninja是一个免费且开源的发票、费用和时间跟踪应用，使用Laravel和Flutter构建。它提供了众多出色的功能，包括自定义品牌发票设计、定期发票和自动向客户收费、实时报价创建和自定义提案、费用报告等等！Invoice Ninja还能够处理来自40多个支付网关的在线支付，包括Stripe、PayPal和WePay。它还接受使用信用卡、ACH、比特币等进行支付。通过Invoice Ninja，您可以在线收款、使用看板板进行项目工作流程组织，并通过Webapp帐户在线跟踪时间。

查看详情

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

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    console.log('收到：', message);
    // 广播给所有客户端
    wss.clients.forEach(function each(client) {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

登录后复制

使用 Socket.IO（功能丰富）：

Socket.IO 提供自动重连、房间管理、广播等高级功能，并兼容不支持 WebSocket 的环境。

服务端：

const io = require('socket.io')(8080);

io.on('connection', (socket) => {
  socket.on('chat message', (msg) => {
    io.emit('chat message', msg); // 广播
  });
});

登录后复制

客户端：

<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io('http://localhost:8080');
  socket.on('chat message', (msg) => {
    console.log('收到：', msg);
  });
  socket.emit('chat message', 'Hi everyone!');
</script>

登录后复制