简介
ngx-sse 是一款基于 Nginx 的 SSE（Server-Sent Events）服务，使用它可以实现基于 HTTP 的实时通信。它的特点是可以在不需要任何插件的情况下，在服务器和客户端之间建立一个持久连接（长连接），从而实现服务器主动向客户端发送消息。对于前端开发中实时通信的场景，ngx-sse 是一个非常不错的选择。
安装
ngx-sse 的安装及配置比较简单，只需要在 Nginx 的编译选项中加入 --with-http_sse_module 参数即可。
./configure --with-http_sse_module make make install
使用
ngx-sse 的使用也比较简单，首先需要在 Nginx 配置文件中添加下列代码：
-- -------------------- ---- -------
-------- ---- -
- ----
--------------- ----
- ------
---------- -------------------
- -----
---------- ------------ ------------------
- --------
---------------- ---------- ---
- ----
------------------ -------------
---------------------- ---
------- ----
-然后，在后端服务器中可以使用 SSE 库向客户端发送消息：
-- -------------------- ---- -------
--- --- - ---------------
--- ------ - -------------------------- ----- ---- -
-- -------- --- ------- -
--- ------ - -------- -----
-------------------- -- -
--------------- -----------------------------
-- ------
-
---最后，在前端中可以使用如下代码接收到从后端发送过来的消息：
var source = new EventSource('/sse');
source.onmessage = function (event) {
console.log(event.data);
};示例代码
为了更好地理解 ngx-sse 的使用，这里给出一个完整的示例代码。在这个例子中，我们会向客户端发送当前服务器时间：
后端代码
-- -------------------- ---- -------
--- ---- - ----------------
--- --- - ---------------
--- ------ - -------------------------- ----- ---- -
-- -------- --- ------- -
--- ------ - -------- -----
-------------------- -- -
--------------- -----------------------------
-- ------
-
---
------------------- -------- -- -
------------------- -- --------- -- ------------------------
---前端代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------- ------------
-------
------
-----------------
---- ------------------
--------
--- ------ - ----------------------------------
--- ------ - --- --------------------
---------------- - -------- ------- -
---------------- - -----------
--
---------
-------
-------总结
ngx-sse 是一款非常方便易用的实时通信工具，它可以帮助我们快速实现服务器端向客户端发送消息的功能。在具体应用中，它不但可用于实时消息推送，也可用于长轮询等场景。因此，掌握和使用 ngx-sse 对于前端开发人员来说是非常有益的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/665084ced3423812e43146ab