在现如今高速发展的互联网时代，即时通讯成为了人们生活中不可或缺的一部分。前端开发人员也逐渐开始关注和涉及到即时通讯系统的开发。两种不同的即时通讯技术 Server-sent Events(SSE) 和 WebSocket ，成为前端开发者们广泛使用的工具。本文将详细介绍如何使用 SSE 和 WebSocket 来开发一个即时通讯系统，并提供相应的示例代码。
简介
Server-sent Events(SSE) 和 WebSocket 都属于 HTML5 提供的一种新型 Web 服务器通信技术, 它们都是基于 HTTP 协议来实现的。它们的共同点是，客户端与服务器之间可以创建一个持续的连接，以便实时收发消息。但是，它们的工作原理和技术方案有所不同。
Server-sent Events(SSE)
Server-sent Events(SSE) 是一种仅用于服务器向客户端推送事件的技术。 SSE 是一种允许Web服务器的推送模型，可以通过单向的连接，将实时数据传输给客户端，允许服务器推送事件和数据更新到客户端。SSE 消息实质上是一条文本消息，以 "\n" 结尾的纯文本格式内容。因此，SSE常常用于需要实时推送事件和消息的应用，如股票行情，即时新闻，天气预报等。
WebSocket
WebSocket 是全双工通信协议，它允许客户端与服务器进行双向通信，可以在建立一次连接后，一直保持连接不断开，迅速地传递数据。而且，不同于传统的 HTTP 请求-响应方式，WebSocket 服务端可以主动向客户端推送消息。
开发一个基于 SSE 和 WebSocket 的即时通讯系统
以下是一个简单的 SSE 架构示例
/* server.js */
const app = require('http').createServer(handler);
const fs = require('fs');
app.listen(3000);
function handler(req, res) {
res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache' });
let count = 0;
setInterval(() => {
res.write(`data: Server-Sent Event: ${count}\n\n`);
count++;
}, 1000);
}
/* client.html */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Server-sent Events</title>
</head>
<body>
<h1>SSE Example</h1>
<div id="sse">Event Stream</div>
<script>
let sse = new EventSource('/sse');
const sseElem = document.getElementById('sse');
sse.addEventListener('message', (event) => {
sseElem.textContent = event.data;
});
</script>
</body>
</html>以上是一个简单的 Server-sent Events 示例架构，需要在服务器端启动一个 http 服务并监听 3000 端口。客户端通过 EventSource 对象访问 /sse 路径，接收服务器端推送的消息。在每个推送周期内，服务器端通过 res.write 方法向客户端推送事件和消息。
以下是一个简单 WebSocket 架构示例
/* server.js */
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 3000});
wss.on('connection', (ws) => {
ws.on('message', (message) => {
console.log(`Received message => ${message}`);
wss.clients.forEach((client) => {
if (client.readyState === WebSocket.OPEN) {
client.send(`Server received => ${message}`);
}
});
});
ws.send('Welcome to Cyberbrain!');
});
/* client.html */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebSocket</title>
</head>
<body>
<h1>WebSocket Example</h1>
<div id="ws">WebSocket</div>
<input type="text" id="message" placeholder="Enter a message">
<button onclick="send()">Send</button>
<script>
const ws = new WebSocket("ws://localhost:3000");
const wsElem = document.getElementById('ws');
ws.onopen = () => {
wsElem.textContent = 'Connection opened!';
}
ws.onmessage = (event) => {
wsElem.textContent = event.data;
};
function send() {
const message = document.getElementById('message').value;
ws.send(message);
}
</script>
</body>
</html>以上是一个简单的 WebSocket 示例架构，通过 WebSocket.Server 对象创建一个 WebSocket 服务监听 3000 端口。客户端通过 WebSocket 对象访问 WebSocket 服务。服务器端通过 ws.on('message', ...) 方法，接收客户端发送过来的消息，并利用 ws.clients.forEach 循环广播该消息。
总结
本篇文章介绍了如何使用 Server-sent Events(SSE) 和 WebSocket 来开发一个即时通讯系统，并提供了相应的示例代码。SSE 和 WebSocket 的区别如下：
- SSE：基于 HTTP 协议实现，仅允许服务器向客户端的一种单向推送，适用于需要实时推送事件和消息的场景。
- WebSocket：双向通信协议，允许客户端与服务器进行双向通信，速度快，适用于大型实时通信应用场景。
根据实际应用场景的需要，选择合适的即时通讯技术来实现客户端与服务器端的实时通信。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6596b32ceb4cecbf2da79392