当前位置：首页 > article >正文

websocket使用

article 2025/2/8 14:02:22

概述

WebSocket 是一种适用于 Web 浏览器与服务器的全双工通信协议，支持网页实时收发数据，无需刷新页面或采用传统 HTTP 轮询机制，确保浏览器与服务器间连接稳定。该特性使其广泛应用于聊天应用、实时数据监控等领域，为实时交互提供高效解决方案。

Websocket 特点

实时性：WebSocket允许服务器主动向客户端推送数据，实现实时通信。
双向通信：WebSocket支持同时发送和接收数据，实现双向通信。
低延迟：由于建立了持久连接，并且数据传输没有额外的HTTP头部信息负担，因此WebSocket能够更快地传输小量数据。
数据传输：WebSocket可以传输文本和二进制数据。文本数据是以UTF-8编码发送和接收的，而二进制数据使用ArrayBuffer对象。
节省带宽：WebSocket只需要一个TCP握手就能创建一个到服务器的链接，并且这个链接可以被复用以节省带宽。
跨域通信：WebSocket协议支持跨域通信，因此可以在任何Web域之间建立实时连接，但仍然会受到服务器的安全策略限制。
可靠性：WebSocket提供了自动重连机制和数据压缩功能，增强了通信的可靠性。

基本使用

使用 WebSocket 进行连接和通信：

// 创建WebSocket对象
const ws= new WebSocket('ws://localhost:8080');

// 连接建立事件
ws.onopen = function() {
  console.log('连接成功建立');
  // 使用send()方法向服务器发送消息
  ws.send('连接成功建立');
};

// 接收到消息事件
ws.onmessage = function(res) {
  console.log('接收到后台服务返回的数据');
};

// 连接关闭事件
ws.onclose = function() {
  console.log('WebSocket连接已关闭');
};

//  连接错误事件
ws.onerror = function(error) {
  console.log('WebSocket连接错误', error);
};

在上述代码中，我们创建了一个WebSocket对象并设置了要连接的服务器地址。然后，我们为这个WebSocket对象添加了四个事件监听器：onopen（连接建立时触发）、onmessage（接收到消息时触发）、onclose（连接关闭时触发）和onerror （连接错误时触发）。

一旦WebSocket连接建立，我们就使 ws.send() 向服务器发送了一条消息“连接成功建立”。随后，每当服务器有新消息发送到客户端时，onmessage事件就会被激活，我们可以在这个事件的回调函数中处理接收到的消息内容。

当不再使用websocket链接服务时可以使用 ws.close() 方法手动关闭连接

WebSocket连接状态：要获取连接状态，可以使用 ws.readyState 属性

0 —— “CONNECTING”：连接还未建立，
1 —— “OPEN”：通信中，
2 —— “CLOSING”：连接关闭中，
3 —— “CLOSED”：连接已关闭。

使用实例

使用express简单搭建一个websocket服务

初始化项目
在项目目录中运行以下命令：
```
npm init -y
npm install express ws
```

创建 Express 和 WebSocket 服务
创建一个 server.js 文件，编写代码：

const express = require('express');
const http = require('http');
const WebSocket = require('ws');

// 创建 Express 应用
const app = express();

// 创建一个 HTTP 服务器
const server = http.createServer(app);

// 创建 WebSocket 服务器，并将其绑定到 HTTP 服务器
const wss = new WebSocket.Server({ server });

// WebSocket 连接处理
wss.on('connection', (ws) => {
  console.log('新的客户端连接');

  // 监听客户端发送的消息
  ws.on('message', (message) => {
    console.log(`收到消息: ${message}`);

    // 广播消息给所有客户端
    wss.clients.forEach((client) => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(`服务器转发: ${message}`);
      }
    });
  });

  // 监听连接关闭
  ws.on('close', () => {
    console.log('客户端断开连接');
  });
});

// 提供静态文件服务（可选）
app.use(express.static('public'));

// 启动 HTTP 服务器
const PORT = 3000;
server.listen(PORT, () => {
  console.log(`服务器已启动，访问 http://localhost:${PORT}`);
});

创建客户端测试页面
在项目根目录下创建一个 public 文件夹，并在其中创建一个 index.html 文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebSocket 测试</title>
</head>
<body>
  <h1>WebSocket 测试</h1>
  <input type="text" id="messageInput" placeholder="输入消息">
  <button onclick="sendMessage()">发送</button>
  <ul id="messages"></ul>

  <script>
    // 创建 WebSocket 连接
    const ws = new WebSocket('ws://localhost:3000');

    // 监听连接打开
    ws.onopen = () => {
      console.log('已连接到服务器');
    };

    // 监听服务器发送的消息
    ws.onmessage = (event) => {
      const messages = document.getElementById('messages');
      const li = document.createElement('li');
      li.textContent = event.data;
      messages.appendChild(li);
    };

    // 监听连接关闭
    ws.onclose = () => {
      console.log('连接已关闭');
    };

    // 发送消息到服务器
    function sendMessage() {
      const input = document.getElementById('messageInput');
      const message = input.value;
      ws.send(message);
      input.value = '';
    }
  </script>
</body>
</html>