在建立 Web 应用时，Socket.io 和 EJS 模板引擎是非常有用的前端工具。 Socket.io 是一个实时通信库，用于建立实时应用。EJS 模板引擎在服务器端生成 HTML。 在本文中，我们将探讨如何使用这两个工具建立 Web 应用。
安装和设置
在开始使用 Socket.io 和 EJS 模板引擎之前，要确保已安装 Node.js。为了使用 Socket.io，需要在终端中运行以下命令：
--- ------- --------- ------
为了使用 EJS 模板引擎，需要在终端中运行以下命令：
--- ------- --- ------
然后，创建一个名为server.js的服务器端文件，并在文件的顶部添加以下代码：
-- ------ ----- ---- - ---------------- ----- ------- - ------------------- ----- -------- - --------------------- -- ----- ----- ---- - ----- -- ---- ----- --- - ---------- -- ----- ----- ------ - ----------------------- -- ------- -------------------------------- - ------------ -- ----- ------------------- -- -- - ---------------------- -- ---- ---------- --- -- -- --------- --- ----- -- - -----------------
在上面的代码中，我们引入了 http，express 和 socket.io 包，定义了端口号，创建了应用和服务器，添加了一个静态文件夹，并创建了一个 Socket.io 服务器。现在，我们已准备好开始编写代码了。
使用 EJS
接下来，我们将从服务器端生成 HTML。为此，我们将使用 EJS 模板引擎。 EJS 是一种简单的模板语言，可以嵌入 JavaScript。 EJS 使用以下语法来嵌入 JavaScript：
--- ------------------ --
为了使用 EJS 模板引擎，需要在server.js文件的顶部添加以下代码：
-- -- --- ---- ----- --- - --------------- -- ------ ------------- -------- -------
现在，我们可以在server.js文件中使用 EJS 来生成 HTML。让我们创建一个名为index.ejs的 EJS 模板文件，并在其中添加以下代码：
--------- -----
------
------
----- ----------------
---------- ----- ----------
-------
------
------- ------ -------
------ ------- ------
-------
-------在上面的模板中，我们使用了<%= ... %>来嵌入 JavaScript 代码。title，header 和 content 是从服务器端传递给模板的变量。 现在，我们已准备好从服务器端呈现此模板。
在server.js中，添加以下代码：
-- ----
------------ ----- ---- -- -
----- ---- - -
------ ---------- - --- ------
------- ----- --------- - --- ------
-------- ------- --------- - --- ------- --- ----
--
------------------- ------
---在上面的代码中，我们创建了一个路由，从服务器端向客户端呈现了一个 EJS 模板。 我们创建了一个名为 data 的变量，并将其传递给模板，用于替换模板中的变量。 现在，我们可以启动服务器并访问http://localhost:8080/来查看呈现的模板。
使用 Socket.io
现在，我们已经知道如何创建 Web 应用，并在服务器端使用 EJS 模板生成 HTML。接下来，我们将使用 Socket.io 来建立一个实时应用。
首先，让我们创建一个名为index.html的客户端文件，并在其中添加以下代码：
--------- -----
------
------
----- ----------------
---------------- ------------
-------
------
------------- ---------
------ ----------- ---------- ---------------------
------- ---------------------
---- --------------------
------- ---------------------------------------
--------
----- ------ - -----
----- ----- - ---------------------------------
----- ---------- - --------------------------------
----- -------- - ------------------------------------
------------------------------------ -- -- -
----- ------- - ------------
---------------------- ---------
----------- - ---
---
-------------------- ------- -- -
----- -- - ----------------------------
------------ - --------
-------------------------
---
---------
-------
-------在上面的代码中，我们创建了一个包含输入框、发送按钮和消息列表的 HTML 文件。客户端在连接到 Socket.io 服务器后，通过发送消息来与服务器通信，并接收从服务器端发送的消息。
接下来，我们要做一些服务器端的设置。在server.js文件中添加以下代码：
------------------- ------ -- -
----------------------
-------------------- ------- -- -
-------------------------------
------------------ ---------
---
----------------------- -- -- -
------------------------
---
---在上面的代码中，我们创建了一个 Socket.io 监听器，并在客户端连接时创建了一个 Socket.io 实例。当客户端发送消息时，服务器发送该消息到所有客户端。 现在，我们能够通过使用浏览器访问http://localhost:8080/并在输入框中键入消息，将消息发送到服务器，并在消息列表中接收来自服务器端的消息。
总结
在本文中，我们探讨了如何使用 Socket.io 和 EJS 模板引擎来建立 Web 应用。我们从安装和设置开始，然后使用 EJS 模板引擎从服务器端生成 HTML，使用 Socket.io 建立了一个实时应用。 希望这篇文章能够对你有所帮助，欢迎留言讨论。 在下面评论区提出你的建议和想法！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64787498968c7c53b04b2ace