Socket.IO 是一个实时通信库，它允许你在浏览器和服务器之间建立持久连接。它支持多种传输机制，包括 WebSocket、HTTP 长轮询等，并且可以自动选择最佳的传输方式。
安装 Socket.IO
首先需要安装 socket.io 和 socket.io-client：
npm install socket.io npm install socket.io-client
服务端安装
在你的 Node.js 应用程序中引入 socket.io：
const io = require('socket.io')(server);这里的 server 是一个 HTTP 服务器实例。如果你还没有创建 HTTP 服务器，可以使用如下代码创建：
// www.javascriptcn.com code example
const http = require('http');
const server = http.createServer((req, res) => {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end('<h1>Hello world</h1>');
});
const io = require('socket.io')(server);
io.on('connection', (socket) => {
console.log('a user connected');
socket.on('disconnect', () => {
console.log('user disconnected');
});
});
server.listen(3000, () => {
console.log('listening on *:3000');
});客户端安装
在客户端引入 socket.io-client：
// www.javascriptcn.com code example
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io('http://localhost');
socket.on('connect', () => {
console.log('connected to the server');
});
socket.on('disconnect', () => {
console.log('disconnected from the server');
});
</script>Socket.IO 基础
连接事件
当客户端连接到服务器时，服务器会触发 connection 事件：
io.on('connection', (socket) => {
console.log('a user connected');
socket.on('disconnect', () => {
console.log('user disconnected');
});
});发送消息
服务器可以通过调用 socket.emit 方法来发送消息给特定的客户端：
socket.emit('news', { hello: 'world' });客户端通过监听 news 事件来接收消息：
socket.on('news', (data) => {
console.log(data);
});广播消息
如果你想向所有客户端广播一条消息，可以使用 io.emit 方法：
io.emit('some event', { some: 'data' });室（Room）
你可以将客户端分配到不同的房间，以便更有效地管理连接：
socket.join('some room');然后你可以向特定房间发送消息：
io.to('some room').emit('some event', { some: 'data' });自定义事件
除了默认的连接和断开事件之外，你还可以定义自定义事件并处理它们：
socket.on('my other event', (data) => {
console.log(data);
});客户端可以触发这个事件：
socket.emit('my other event', { my: 'data' });实战案例：聊天室
服务端代码
// www.javascriptcn.com code example
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);
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
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('listening on *:3000');
});客户端代码
// www.javascriptcn.com code example
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(function () {
var socket = io();
$('form').submit(function(e) {
e.preventDefault(); // prevents page reloading
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
window.scrollTo(0, document.body.scrollHeight);
});
});
</script>
</body>
</html>总结
本章介绍了如何使用 Socket.IO 来实现简单的实时通信功能。通过这些基础知识，你可以进一步探索和应用 Socket.IO 的高级特性。希望你能利用这些知识构建出有趣的实时应用程序！