Socket.IO 入门实战指南

2023-10-14 09:26:02

Socket.IO 入门

Socket.IO 是一个开源库，它允许在浏览器和服务器之间建立双向通信。这意味着浏览器可以向服务器发送消息，而服务器也可以向浏览器发送消息。这使得 Socket.IO 非常适合构建实时应用程序，例如聊天、多人游戏和数据可视化。

Socket.IO 的工作原理是通过 WebSocket。WebSocket 是 HTML5 中的一种协议，它允许浏览器和服务器之间建立双向通信。WebSocket 的连接是持续的，这意味着浏览器和服务器可以随时互相发送消息。

2. 搭建环境

- Node.js（版本 8 或更高）
- npm（Node 包管理器）
- 文本编辑器

2.1 安装 Socket.IO

$ npm install socket.io

2.2 创建服务器

// 引入 Socket.IO 库
const socketIO = require('socket.io');

// 创建服务器
const server = require('http').createServer();

// 初始化 Socket.IO
const io = socketIO(server);

// 监听来自客户端的连接
io.on('connection', (socket) => {
  console.log('新客户端已连接');

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

    // 将消息广播给所有已连接的客户端
    io.emit('message', message);
  });

  // 监听客户端断开连接
  socket.on('disconnect', () => {
    console.log('客户端已断开连接');
  });
});

// 启动服务器
server.listen(3000);

2.3 创建客户端

<!DOCTYPE html>
<html>
<head>
  
  <script src="/socket.io/socket.io.js"></script>
  <script>
    // 创建 Socket.IO 实例
    const socket = io();

    // 监听服务器发送的消息
    socket.on('message', (message) => {
      console.log(`收到服务器的消息：${message}`);
    });

    // 发送消息给服务器
    document.getElementById('send-message').addEventListener('click', () => {
      const message = document.getElementById('message').value;
      socket.emit('message', message);
    });
  </script>
</head>
<body>
  <h1>Socket.IO 聊天室</h1>
  <input type="text" id="message" placeholder="输入消息">
  <button id="send-message">发送</button>
</body>
</html>