前端技术的快速发展和流行,使得实时协作成为一个非常重要的功能。在这篇文章中,我们将介绍如何从一个简单的 Server-Sent Events 应用程序开始,构建一个实时多人协作的实战项目。
什么是 Server-Sent Events?
Server-Sent Events (SSE) 是一种 Web API,用于将服务器端生成的事件发送到客户端。通过 SSE,Web 应用程序可以实时地向客户端推送事件通知,而无需客户端轮询服务器。
SSE 协议基于 HTTP 协议,并使用 text/event-stream MIME 类型。这意味着 SSE 与 WebSockets 相比,具有更少的开销和更好的性能。SSE 支持自定义事件,允许客户端同时订阅多个事件源。
Server-Sent Events 应用程序示例
让我们从一个简单的 Server-Sent Events 应用程序开始。我们将创建一个基于 Node.js 的 Web 服务器,向客户端发送当前时间的事件。
服务器端代码
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ------ - ----------------------- ---- -- - ------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------ --- -------------- -- - ----- ---- - ------ ----- --------------------------- ---------------- -- ------ --- -------------------- ------------------- ------- -- ---- -------
我们创建了一个 HTTP 服务器,监听在 3000 端口上。在处理客户端请求时,我们将响应头设置为 SSE 所需的 MIME 类型,以及一些其他的头信息。然后,我们使用 setInterval 函数每秒发送一个事件。
客户端代码
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ---------- ------------ ------- ------ --------------- ----------- ---- ------------------ -------- ----- ------ - ---------------------------------- ----- -- - --- ------------------------------------- ------------------------------ ----- -- - ----- ---- - ----------- ---------------- -- ----------------- --- --------- ------- -------
我们的客户端代码很简单。我们创建了一个事件源对象,连接到我们的服务器应用程序并监听 'message' 事件。当服务器发送一个事件时,我们在页面上添加一个新的段落元素,其中包含事件数据。
在浏览器中打开我们的应用程序,您应该会看到当前时间按秒更新的输出。
多人实时协作项目示例
现在我们已经了解了如何使用 Server-Sent Events 构建一个简单的应用程序,接下来,我们将扩展它,创建一个多人实时协作项目。这个项目是一个实时白板,可以允许多个用户在同一个画布上绘制。
服务器端代码
-- -------------------- ---- ------- ----- ---- - ---------------- ----- -- - -------------- ----- ---- - ---------------- ----- ---- - ---------------- -- ----- ----- --------- - -------------------- ---------- ----- ------ - ----------------------- ---- -- - -- -------- --- --- -- ------- --- -------------- - ----- --------- - ------------------------------------ -------------- -------- ------------------ ---------------- -------------- ------------------- - ---- -- -------- --- ------------- - ----- --- - ------------------------------------ -------------- ------------------ ---------------- ------------- ------------- - ---- -- -------- --- ---------- - ----- -- - ------------------------------------ ----------- ------------------ ---------------- --------------------------- ------------ - ---- -- -------- --- ---------- - ------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------ --- ----- ---- - ---------------- ---------------- -------------- -- ------ --- --- ----------- --- --------- ------ ---- ---------------------- --------------- -- -- - -------------------------------------------- --- --- - ---- - ------------------ ---------------- --------------- ------------ --- -------- - --- ----- ------------- - -- -- - --- - ----- ---- - ------------------------------------ --------------- -------- ------ ----- - ----- ----- - ------------------- ------ ----- - -- ----- -------------- - ---- -- - --------------------------------- --------------- ----- --- -- - -- ----- ----- ---- ------------------ ------ ------- --- -- ----- ------------------- - -- -- - ----- ---- - ---------------- ----------------------- -- - ---------------- -------------- --- -- --- ----------- - --- ------------------- -- -- - ------------------- ------- -- ---- ---------- --- -------------------------------- ------
我们首先创建了一个 HTTP 服务器。我们使用 'if' 语句来根据请求 URL 返回不同的内容。对于根路径或 index.html,我们返回 HTML 文件。对于样式表或 app.js 文件,我们返回相应的文件。对于 events URL,我们设置响应头为 SSE 所需的 MIME 类型,并发送当前画布数据。
我们还侦听每个新连接,并将其放入数组中。我们使用 'close' 事件来删除断开连接的客户端。最后,我们使用 setInterval 函数广播画布数据到所有连接的客户端。
客户端代码
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ---------------- ------------------ ----- ---------------- ----------------- ------- ------ ------- --------------------- ------- ---------------------- ------- -------
我们的客户端代码相对简单。我们添加了一个 canvas 元素,以及一个指向我们的 JavaScript 文件的 script 元素。
-- -------------------- ---- ------- ----- ------ - ---------------------------------- ----- --- - ------------------------ ----- ------ - --- ----------------------- --- --------- - ------ ----- ----- - --- ----- -------- - ---- -- - ---------------- ------------------- --------- ------------------- --------- ------------- -- ----- --------- - ---- -- - --- ------- - --- --- - ------- - ----------------- - ----- ----- - -- ----- ------- ---- ------------------- - -- ------------- --- ------- - ------------------------- ----------------------- - -- ----- --------------- - - -- - --------- - ----- ----- ---- - ------------------------------- ----- - - --------- - ---------- ----- - - --------- - --------- ----- ---- - - --- -- --- -- --- - - -- --- - - - -- ----------------- --------------- ----- ---- - --------------------- ------- ------- ---------------- - ------- ------- -------- ---------------- -------------------- ----- ---- --- -- ----- --------------- - - -- - -- ----------- - ----- ---- - ------------------------------- ----- - - --------- - ---------- ----- - - --------- - --------- ----- ---- - - --- ---------------------- --- ---------------------- --- -- --- - -- ----------------- --------------- ----- ---- - --------------------- ------- ------- ---------------- - ------- ------- -------- ---------------- -------------------- ----- ---- --- - -- ----- ------------- - -- -- - --------- - ------ -- ------------------------------------ ----------------- ------------------------------------ ----------------- ---------------------------------- --------------- ---------------------------------- ----- -- - ----- ---- - ----------- ---------------- ---
我们首先获取我们的 canvas 元素和它的上下文。我们创建一个事件源对象,连接到服务器端的事件源。我们还创建了一个 isDrawing 变量,用于跟踪用户是否正在绘制。
我们定义了一个 lines 数组来存储所有的线段。drawLine 函数用于绘制一条线段。
我们的事件处理程序轻松地调整了我们的 isDrawing 变量,并从鼠标指针的位置计算线段的起点和终点。每当用户绘制完一条线段时,我们向服务器发送一个包含线段的消息。我们使用 JSON 格式化数据,并使用 fetch 方法进行 POST 请求。
我们的事件源监听 'message' 事件,并调用 parseData 函数以解析来自服务器端的数据。如果数据代表线段,则我们将其添加到我们的 lines 数组中,并调用 drawLine 函数来绘制它。
总结
在本文中,我们学习了如何使用 Server-Sent Events 构建一个简单的应用程序,并将其扩展为实现多人实时协作的项目。我们了解了如何使用 SSE 协议向客户端推送事件,并向客户端发送服务器生成的事件通知。
我们通过一个实际的应用程序,演示了如何在多个客户端之间共享信息,以实现协作。希望这篇文章能够帮助您了解 Server-Sent Events 的基础知识,并了解如何将其用于实时 Web 应用程序。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6481452848841e98940b1bf2