Socket.IO 开源项目教程
socket.io项目地址:https://gitcode.com/gh_mirrors/soc/socket.io
项目介绍
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>
最佳实践
- 命名空间:使用命名空间来组织不同类型的通信。
- 房间:使用房间来管理用户分组。
- 错误处理: