概述
实时聊天应用是现代 Web 应用中非常常见的一种功能，它可以让用户在网页上进行即时通讯。在这篇文章中，我们将介绍如何使用 Hapi.js 和 Socket.io 构建一个实时聊天应用。
Hapi.js 是一个 Node.js 的 Web 框架，它提供了一组强大的工具和插件，可以帮助我们轻松构建 Web 应用。Socket.io 是一个实时通讯框架，它可以在客户端和服务器之间建立持久化的双向连接，使得客户端和服务器能够实时地交换数据。
在本文中，我们将使用 Hapi.js 和 Socket.io 创建一个简单的实时聊天应用，并介绍如何将其部署到云服务器上。
技术栈
- Hapi.js
- Socket.io
- Vue.js
- MongoDB
构建后端
我们首先需要构建后端，使用 Hapi.js 和 Socket.io 创建一个 WebSocket 服务器。
安装依赖
--- ------- ---- ---------
创建服务器
创建一个名为 server.js 的文件，并编写以下代码：
----- ---- - ----------------------
----- -------- - ---------------------
----- ------ - -------------
----- -----
----- -----------
---
----- -- - --------------------------
------------------- -------- -- -
-------------- ---- ------------
-------------------- --------- -- -
--------------------- -------- -------------
------------------ ---------
---
----------------------- -- -- -
----------------- ---------------
---
---
----- ---- - ----- -- -- -
----- ---------------
------------------- ------- --- ---------------------
--
-------在这里，我们创建了一个 Hapi.js 服务器，监听在 localhost:3000 上。然后，我们使用 Socket.io 创建了一个 WebSocket 服务器，并在客户端连接和断开连接时打印一些信息。在客户端发送消息时，我们将消息广播给所有连接到服务器的客户端。
运行服务器
运行以下命令启动服务器：
---- ---------
现在，WebSocket 服务器已经准备好了。我们可以使用任何支持 WebSocket 协议的客户端与服务器进行通信。
构建前端
接下来，我们将构建前端，使用 Vue.js 创建一个简单的聊天室。
安装依赖
使用 Vue CLI 创建一个新的 Vue.js 项目，并安装 socket.io-client：
--- ------ -------- -- -------- --- ------- ----------------
创建组件
创建一个名为 ChatRoom.vue 的组件，并编写以下代码：
----------
-----
---- -------------- -- --------- ------------------
-- ------------ --
------
----- ------------------------------
------ ----------- -------------- --
------- ---------------------------
-------
------
-----------
--------
------ -- ---- -------------------
------ ------- -
------ -
------ -
----- ---
--------- --
--
--
--------- -
----- ------ - ----------------------------
-------------------- --------- -- -
----------------------------
---
--
-------- -
------------- -
----- ------ - ----------------------------
---------------------- - --- ----------- ----- --------- ---
--------- - ---
-
-
--
---------在这里，我们创建了一个简单的聊天室组件，它包含一个文本框和一个发送按钮，用来发送消息。我们使用 socket.io-client 创建一个 WebSocket 客户端连接到服务器，并在接收到新消息时将其添加到消息列表中。
运行前端
运行以下命令启动前端：
--- --- -----
现在，我们可以在浏览器中打开 http://localhost:8080，并使用聊天室进行实时通讯了。
部署到云服务器
最后，我们需要将应用程序部署到云服务器上，以便用户可以在互联网上访问它。在这里，我们使用 Heroku 作为云服务器。
安装 Heroku CLI
安装 Heroku CLI 并登录：
---- --- ----------- -- ---- ------- ------ ------ -----
部署后端
首先，我们需要将后端代码上传到 Heroku，并将其部署为一个 Node.js 应用程序。
在
server.js文件所在的目录中，运行以下命令初始化 Git 仓库：--- ----
创建一个名为
Procfile的文件，并编写以下代码：---- ---- ---------
这个文件告诉 Heroku 如何启动我们的应用程序。
创建一个新的 Heroku 应用程序，并将 Git 仓库推送到 Heroku：
------ ------ --- --- - --- ------ -- -------- ------- --- ---- ------ ------
这个命令将会自动构建并部署我们的应用程序。
打开浏览器，访问 Heroku 应用程序的 URL（例如
https://my-app.herokuapp.com），确保应用程序已经正确部署。
部署前端
接下来，我们需要将前端代码上传到 Heroku，并将其部署为一个静态网站。
在
chatroom目录中，运行以下命令初始化 Git 仓库：--- ----
在
package.json文件中增加以下代码：---------- - -------- ---------------- ------ -
这个命令将会构建我们的应用程序。
运行以下命令构建应用程序：
--- --- -----
这个命令将会在
dist目录中生成一个静态网站。创建一个名为
Staticfile的文件，并编写以下代码：----- -----
这个文件告诉 Heroku 如何启动我们的静态网站。
创建一个新的 Heroku 应用程序，并将 Git 仓库推送到 Heroku：
------ ------ --- --- - --- ------ -- -------- ------- --- ---- ------ ------
这个命令将会自动构建并部署我们的静态网站。
打开浏览器，访问 Heroku 应用程序的 URL（例如
https://my-app.herokuapp.com），确保应用程序已经正确部署。
现在，我们已经成功地将应用程序部署到了云服务器上，用户可以在互联网上访问它了。
总结
在本文中，我们介绍了如何使用 Hapi.js 和 Socket.io 创建一个实时聊天应用，并将其部署到云服务器上。我们还介绍了如何使用 Vue.js 创建一个简单的聊天室，并与后端进行通讯。希望这篇文章对于那些正在学习前端开发的读者有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65549f17d2f5e1655de6c212