在建立 Web 应用时，Socket.io 和 EJS 模板引擎是非常有用的前端工具。 Socket.io 是一个实时通信库，用于建立实时应用。EJS 模板引擎在服务器端生成 HTML。 在本文中，我们将探讨如何使用这两个工具建立 Web 应用。
安装和设置
在开始使用 Socket.io 和 EJS 模板引擎之前，要确保已安装 Node.js。为了使用 Socket.io，需要在终端中运行以下命令：
npm install socket.io --save
为了使用 EJS 模板引擎，需要在终端中运行以下命令：
npm install ejs --save
然后，创建一个名为server.js的服务器端文件，并在文件的顶部添加以下代码：
-- -------------------- ---- ------- -- ------ ----- ---- - ---------------- ----- ------- - ------------------- ----- -------- - --------------------- -- ----- ----- ---- - ----- -- ---- ----- --- - ---------- -- ----- ----- ------ - ----------------------- -- ------- -------------------------------- - ------------ -- ----- ------------------- -- -- - ---------------------- -- ---- ---------- --- -- -- --------- --- ----- -- - -----------------展开代码
在上面的代码中，我们引入了 http，express 和 socket.io 包，定义了端口号，创建了应用和服务器，添加了一个静态文件夹，并创建了一个 Socket.io 服务器。现在，我们已准备好开始编写代码了。
使用 EJS
接下来，我们将从服务器端生成 HTML。为此，我们将使用 EJS 模板引擎。 EJS 是一种简单的模板语言，可以嵌入 JavaScript。 EJS 使用以下语法来嵌入 JavaScript：
<%= someJavaScriptCode %>
为了使用 EJS 模板引擎，需要在server.js文件的顶部添加以下代码：
// 引入 EJS 模板引擎 const ejs = require('ejs'); // 设置模板引擎 app.set('view engine', 'ejs');
现在，我们可以在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
