软件测试/测试开发/全日制 |使用Socket.IO实现实时通信http://Socket.IO是一个基于WebSock

霍格沃兹测试开发学社推出了《Python全栈开发与自动化测试班》。本课程面向开发人员、测试人员与运维人员，课程内容涵盖Python编程语言、人工智能应用、数据分析、自动化办公、平台开发、UI自动化测试、接口测试、性能测试等方向。为大家提供更全面、更深入、更系统化的学习体验，课程还增加了名企私教服务内容，不仅有名企经理为你1v1辅导，还有行业专家进行技术指导，针对性地解决学习、工作中遇到的难题。让找工作不再是难题，并且能助力你拿到更好的绩效与快速晋升。

Socket.IO是一个基于WebSocket的实时通信库，它使得在浏览器和服务器之间建立实时、双向的通信变得更加容易。下面是一个简单的使用Socket.IO实现实时通信的示例，包括服务端（使用Node.js和Express）和客户端（使用JavaScript和Socket.IO库）。

服务端（Node.js和Express）

首先，确保你已经安装了Node.js和npm。

创建一个新的Node.js项目，并安装Express和Socket.IO：

npm init -y
npm install express socket.io

创建一个server.js文件，实现一个简单的Express应用并集成Socket.IO：

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

const app = express();
const server = http.createServer(app);
const io = socketIO(server);

// 当有新连接时执行
io.on('connection', (socket) => {
  console.log('New connection: ' + socket.id);

  // 监听客户端发送的消息
  socket.on('message', (data) => {
    console.log(`Message from ${socket.id}: ${data}`);

    // 广播消息给所有连接的客户端
    io.emit('message', { from: socket.id, content: data });
  });

  // 监听断开连接事件
  socket.on('disconnect', () => {
    console.log('Disconnected: ' + socket.id);
  });
});

// 服务器监听端口
const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

启动服务器：

node server.js

客户端（JavaScript和Socket.IO库）

在HTML文件中引入Socket.IO库，创建一个简单的客户端：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Socket.IO Chat</title>
</head>
<body>
  <ul id="messages"></ul>
  <form id="form" action="">
    <input id="input" autocomplete="off" /><button>Send</button>
  </form>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.0/socket.io.js"></script>
  <script>
    // 连接到服务器
    const socket = io();

    // 监听服务端广播的消息
    socket.on('message', (data) => {
      const messages = document.getElementById('messages');
      const li = document.createElement('li');
      li.textContent = `${data.from}: ${data.content}`;
      messages.appendChild(li);
    });

    // 监听表单提交事件，发送消息
    document.getElementById('form').addEventListener('submit', (e) => {
      e.preventDefault();
      const input = document.getElementById('input');
      const message = input.value;
      input.value = '';
      socket.emit('message', message);
    });
  </script>
</body>
</html>

在上述示例中，客户端通过Socket.IO连接到服务器，监听服务端广播的消息，同时通过表单提交事件发送消息到服务器。

打开多个浏览器窗口或标签，并访问 http://localhost:3000，你将看到它们之间可以实时通信。

这只是一个简单的例子，Socket.IO提供了更多的功能，例如房间管理、自定义事件等，可根据实际需求进行扩展。