WebSocket 和 Socket.IO

WebSocket

WebSocket 是一种网络通信协议，它提供了全双工（full-duplex）通信通道，允许服务器和客户端之间进行双向通信。这种通信方式比传统的 HTTP 请求/响应模式更高效，因为它减少了网络延迟，并且只需要一个 TCP 连接就可以进行双向通信。

WebSocket 的工作流程如下：

1. 客户端发送一个 HTTP 请求到服务器，这个请求包含一个 "Upgrade: websocket" 头部，表示客户端希望升级到 WebSocket 协议。

2. 如果服务器支持 WebSocket 协议，它会返回一个包含 "101 Switching Protocols" 状态码的 HTTP 响应，表示服务器同意升级到 WebSocket 协议。

3. 一旦协议升级完成，客户端和服务器就可以在同一个 TCP 连接上进行双向通信。

以下是一个使用 Node.js 的 WebSocket 服务器的示例：

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', ws => {
	ws.on('message', message => {
		console.log('received: %s', message);
	});
	ws.send('Hello! I am a WebSocket server.');
});

在这个示例中，服务器监听 8080 端口的 WebSocket 连接。当有新的连接建立时，服务器会发送一条消息给客户端。当服务器接收到客户端的消息时，它会打印这条消息。

WebSocket 协议是 HTML5 的一部分，大多数现代浏览器都支持 WebSocket 协议。以下是一个在浏览器中使用 WebSocket 的示例：

const ws = new WebSocket('ws://localhost:8080');
ws.onopen = () => {
	ws.send('Hello! I am a WebSocket client.');
};
ws.onmessage = event => {
	console.log('received: %s', event.data);
};

在这个示例中，浏览器创建一个新的 WebSocket 连接到服务器。当连接建立时，浏览器会发送一条消息给服务器。当浏览器接收到服务器的消息时，它会打印这条消息。

WebSocket 协议非常适合实时应用，如聊天应用、多人在线游戏、实时股票报价等。

Socket.IO

Socket.IO 是一个基于 Node.js 的库，它提供了实时、双向和基于事件的通信能力。它主要由两部分组成：在服务器端的 Node.js 库和在客户端的 JavaScript 库。Socket.IO 不仅支持 WebSocket，还支持许多其他的传输机制，如 AJAX 长轮询、AJAX 多路复用等，以实现实时通信。

Socket.IO 的主要特点包括：

1. 实时分析：你可以在服务器端推送实时事件到客户端。

2. 二进制支持：你可以发送图片、视频或者任何二进制数据。

3. 文档同步：当一个文档更新时，你可以将更新的内容实时推送到所有的客户端。

4. 实时聊天：你可以创建一个实时聊天应用。

以下是一个使用 Socket.IO 的示例：

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);

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

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

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

server.listen(3000, () => {
	console.log('listening on *:3000');
});

在这个示例中，服务器监听 3000 端口的连接。当有新的连接建立时，服务器会打印一条消息。当连接断开时，服务器也会打印一条消息。当服务器接收到 'chat message' 事件时，它会将这个消息广播给所有的客户端。

在客户端，你可以使用 Socket.IO 的客户端库来连接到服务器，并发送和接收事件。以下是一个在浏览器中使用 Socket.IO 的示例：

const 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));
});

在这个示例中，当用户提交表单时，浏览器会发送一个 'chat message' 事件到服务器，并清空输入框。当浏览器接收到 'chat message' 事件时，它会将这个消息添加到消息列表中。