1.15 Socket.IO

最新推荐文章于 2025-07-29 15:59:31 发布

chxii

最新推荐文章于 2025-07-29 15:59:31 发布

阅读量256

点赞数 9

CC 4.0 BY-SA版权

分类专栏： vue3 # nodejs 文章标签： node.js

本文链接：https://blog.csdn.net/chxii/article/details/148650307

vue3 同时被 2 个专栏收录

28 篇文章

订阅专栏

nodejs

25 篇文章

订阅专栏

Socket.IO 是一个基于 Node.js 的实时应用库，它封装了 WebSocket 协议，同时提供了降级方案，在不支持 WebSocket 的环境下能自动切换到其他传输方式，如 HTTP 长轮询。

核心概念

WebSocket ：HTML5 提供的一种在单个 TCP 连接上进行全双工通信的机制，实现客户端与服务器的实时通信。
实时通信：服务器和客户端能够在任意时刻相互发送数据。
降级机制：当 WebSocket 不可用时，Socket.IO 会自动降级到 HTTP 长轮询等其他通信方式。

安装

服务器端（Node.js）

npm install socket.io

客户端

<script src="/socket.io/socket.io.js"></script>

当你使用 socket.io 模块创建一个实例（比如 const io = require(‘socket.io’)(server)）时，Socket.IO 默认会在你的 HTTP 服务上挂载一个中间件，用来处理对 /socket.io/ 路径下的请求。

当浏览器访问 /socket.io/socket.io.js 时，实际上是连接到了你 Node.js 后端运行的 socket.io 库内部的一个内置 HTTP 接口，这个接口会动态返回客户端所需的 JavaScript 文件（即 socket.io.js 或压缩后的 socket.io.min.js）

基本使用

服务器端示例(与 Express 集成)

const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);

// 中间件
app.use(express.json());
app.use(express.static('public'));

// API 路由
app.get('/api/users', (req, res) => {
  res.json([{ id: 1, name: 'John' }]);
});

// Socket.IO 连接
 
// 监听客户端连接事件
io.on('connection', (socket) => {
  console.log('一个用户已连接');
 
  // 监听客户端发送的消息
  socket.on('chat message', (msg) => {
    // 向所有连接的客户端广播消息
    io.emit('chat message', msg);
  });
 
  // 监听客户端断开连接事件
  socket.on('disconnect', () => {
    console.log('一个用户已断开连接');
  });
});
 
const port = 3000;
http.listen(port, () => {
  console.log(`服务器运行在端口 ${port}`);
});

客户端示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Socket.IO 示例</title>
</head>
<body>
  <input id="input" autocomplete="off" /><button>发送</button>
  <ul id="messages"></ul>
 
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();
    const input = document.getElementById('input');
    const button = document.querySelector('button');
    const messages = document.getElementById('messages');
 
    button.addEventListener('click', () => {
      if (input.value) {
        // 向服务器发送消息
        socket.emit('chat message', input.value);
        input.value = '';
      }
    });
 
    // 监听服务器发送的消息
    socket.on('chat message', (msg) => {
      const item = document.createElement('li');
      item.textContent = msg;
      messages.appendChild(item);
    });
  </script>
</body>
</html>