在现代 Web 应用程序中，即时通讯系统已成为一个不可或缺的功能。它使得用户可以在不离开当前 Web 页面的情况下，即时与其他用户通信。
本文将介绍如何使用 Server-sent Events（服务端推送事件）实现一个简单但高效的即时通讯系统。
什么是 Server-sent Events
Server-sent Events（SSE）是一种 HTML5 技术，它允许 Web 服务器通过 HTTP 发送事件流到客户端。SSE 使用 HTTP 的长连接，允许服务器在任何时候向客户端推送数据。
SSE 的优势在于，它比传统轮询技术更高效。轮询是指客户端每隔一段时间向服务器发送请求，以检查是否有新数据可用。而 SSE 允许服务器主动推送数据，从而减少了网络流量和服务器负载。
如何使用 SSE 实现即时通讯
在我们的示例应用程序中，我们将使用 SSE 技术实现一个简单的聊天应用程序。在该应用程序中，用户可以创建新的聊天室，加入现有的聊天室，发送消息等等。
创建聊天室
首先，我们需要创建一个 HTML 页面，它将使用 SSE 技术向服务器发送请求来获取聊天室信息。
-- -------------------- ---- -------
--------- -----
------
------
-------------------
-------
------
-------- ----------
--- ----------------
------
------ ----------- ------------- ----------------- ------
------- ------------- ----------------------------- -------------
-------
--------
-------- ------------ -
--- -------- - ------------------------------------------
-- ----- ----------
-
---------
------- -----------------------
-------
-------然后我们需要创建一个 JavaScript 文件 chat.js，其中包含与服务器进行通信的所有逻辑。
首先，我们需要创建一个 SSE 连接来接收来自服务器的事件流。
var source = new EventSource('/rooms');
source.onmessage = function(event) {
console.log(event.data);
// TODO: 处理来自服务器的数据
};这里我们将 SSE 连接的 URL 设置为 /rooms，因为服务器将会在该 URL 上推送聊天室的信息。当有新聊天室创建时，服务器将发送一条消息，告知客户端有新聊天室可用。
加入聊天室
接下来，我们需要允许用户加入聊天室。
-- -------------------- ---- -------
--------- -----
------
------
-------------------
-------
------
-------- ----------
--- ----------------
------
------ ----------- ------------- ----------------- ------
------- ------------- ----------------------------- -------------
-------
----
-------- ---------
--- -------------------
------
------ ----------- ------------ ----------------------
------- ------------- -------------------------------------
-------
--------
-------- ------------ -
--- -------- - ------------------------------------------
-- ----- ----------
-
-------- ---------------- -
-- ----- -----
-
-------- ------------- -
--- ------- - -----------------------------------------
-- ----- ----
-
---------
------- -----------------------
-------
-------我们将在页面上添加一个新的聊天室列表，以供用户选择加入的聊天室。当用户点击列表中的任何聊天室时，我们将会加入该聊天室并显示聊天室的聊天记录。
source.onmessage = function(event) {
var room = JSON.parse(event.data);
var roomsList = document.getElementById('rooms');
var roomItem = document.createElement('li');
roomItem.innerHTML = room.name + ' (<a href="#" onclick="joinRoom(\'' + room._id + '\')">join</a>)';
roomsList.appendChild(roomItem);
};在这里，我们将使用 JSON 格式来表示聊天室信息，并添加一个新的列表项目。当用户点击“加入”链接时，我们将会使用加入聊天室的 API 将用户添加到聊天室中，并显示该聊天室的聊天记录。
发送消息
最后，我们需要允许用户发送消息。
-- -------------------- ---- -------
-------- ---------------- -
--- ------------ - ------------------------------------
---------------------- - ---
--- ------ - --- --------------------- - ------ - -------------
---------------- - --------------- -
--- ------- - -----------------------
--- ----------- - -----------------------------
--------------------- - ---------- - ---------------- - ----------- - - -------------
--------------------------------------
--
-------------------------------------------
--- ----------- - -----------------------------------------
-------------------- - --------------- -
-----------------------
--- ------- - -----------------------------------------
-- ----- ----
---------------------------------------- - ---
--
-在这里，我们将会创建一个 SSE 连接以接收来自服务器的聊天消息。该应用程序将会在页面上显示每条聊天消息，并允许用户发送新的消息。
结论
Server-sent Events 技术使得建立实时 Web 应用程序变得更容易。此外，使用 SSE 进行通信比轮询技术更高效，可以减少网络流量和服务器负载。
在本文中，我们已经介绍了如何使用 SSE 实现一个简单的聊天应用程序。虽然该示例是一个基础的应用程序，但它可以为那些希望学习实时 Web 应用程序的开发者提供深入的指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674e4a44947dc5bcb309e01a