【亲测免费】 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>

最佳实践

命名空间：使用命名空间来组织不同类型的通信。
房间：使用房间来管理用户分组。
错误处理：

登录后查看全文

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

项目介绍

项目快速启动

安装

服务器端代码

客户端代码

运行服务器

应用案例和最佳实践

实时聊天应用

服务器端代码

客户端代码

最佳实践

热门内容推荐

最新内容推荐

项目优选

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

项目介绍

项目快速启动

安装

服务器端代码

客户端代码

运行服务器

应用案例和最佳实践

实时聊天应用

服务器端代码

客户端代码

最佳实践

相关内容推荐

热门内容推荐

最新内容推荐

项目优选