【亲测免费】 Socket.IO 开源项目教程

2026-01-18 09:55:52作者：廉彬冶Miranda

项目介绍

Socket.IO 是一个实时应用程序框架，它允许服务器和客户端之间的双向通信。它建立在 WebSocket 协议之上，并提供了额外的功能，如自动重连、二进制流、命名空间和广播等。Socket.IO 支持多种传输方式，包括 WebSocket、AJAX 长轮询和 JSONP 轮询，确保了在不同浏览器和设备上的兼容性。

项目快速启动

安装

首先，你需要在你的项目中安装 Socket.IO。你可以使用 npm 来安装：

npm install socket.io

服务器端代码

创建一个 server.js 文件，并添加以下代码：

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

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

io.on('connection', (socket) => {
  console.log('A user connected');

  socket.on('disconnect', () => {
    console.log('User disconnected');
  });
});

server.listen(3000, () => {
  console.log('Server is running on port 3000');
});

客户端代码

在你的 HTML 文件中，添加以下代码：

<!DOCTYPE html>
<html>
<head>
  <title>Socket.IO Example</title>
</head>
<body>
  <h1>Socket.IO Example</h1>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();

    socket.on('connect', () => {
      console.log('Connected to server');
    });
  </script>
</body>
</html>

运行服务器

在终端中运行以下命令来启动服务器：

node server.js

打开浏览器并访问 http://localhost:3000，你应该会在控制台中看到 "Connected to server" 的消息。

应用案例和最佳实践

实时聊天应用

Socket.IO 常用于构建实时聊天应用。以下是一个简单的聊天应用示例：

服务器端代码

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

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

io.on('connection', (socket) => {
  console.log('A user connected');

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

  socket.on('disconnect', () => {
    console.log('User disconnected');
  });
});

server.listen(3000, () => {
  console.log('Server is running on port 3000');
});

客户端代码

<!DOCTYPE html>
<html>
<head>
  <title>Chat Example</title>
</head>
<body>
  <ul id="messages"></ul>
  <form id="chat-form">
    <input id="message-input" autocomplete="off" /><button>Send</button>
  </form>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();

    const form = document.getElementById('chat-form');
    const input = document.getElementById('message-input');
    const messages = document.getElementById('messages');

    form.addEventListener('submit', (e) => {
      e.preventDefault();
      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);
      window.scrollTo(0, document.body.scrollHeight);
    });
  </script>
</body>
</html>