在线聊天室应用，早已不是一个新鲜的东西了。在当今社交网络蓬勃发展的时期，人们已经很容易地习惯了通过互联网和智能终端进行在线聊天。现在，我们将使用 Vue.js 和 Express.js 框架来实现一个简单的在线聊天应用。
技术栈
在本次项目中，我们使用了以下技术：
- Vue.js：一个便于构建用户界面的 JavaScript 框架。
- Express.js：一个基于 Node.js 平台的 Web 开发框架。
- Socket.io：一个基于 WebSocket 的实时通信引擎。
开始前的准备
在开始之前，我们需要先安装以下软件：
- Node.js 和 npm：开发环境需要。
- Vue CLI：Vue.js 的脚手架工具。
完成安装后，我们可以开始构建我们的聊天室应用。
Vue.js 部分
首先，我们需要使用 Vue CLI 创建一个新的 Vue.js 项目：
vue create chat-app
接着，在 src 目录下创建以下文件：
- Chat.vue：聊天室界面组件。
- Login.vue：登录界面组件。
- main.js：应用入口文件。
Login.vue
在 Login.vue 文件中，我们将创建一个简单的登录表单，用于输入用户的昵称：
-- -------------------- ---- -------
----------
-----
--------- ---- -------------
----- ------------------------
------ ------------------ ----------- --
----------------------
-------
------
-----------
--------
------ ------- -
----- --------
------ -
------ -
--------- -----
--
--
-------- -
------- -
-- --------------- -
------------------- ---------------
-
--
--
--
---------在上面的代码中，我们定义了一个用于输入昵称的表单，同时也定义了一个登录方法。
Chat.vue
在 Chat.vue 文件中，我们将创建一个简单的聊天室界面，用于显示聊天消息和输入新的消息。
-- -------------------- ---- -------
----------
-----
---- -------------- ---------------
---- -------------- -- --------- ------------------
---------- ---------------- ------------
-- --------------- --
------
------
----- ------------------------------
------ ----------------- ----------- --
---------------------
-------
------
-----------
--------
------ ------- -
----- -------
------ -
--------- -
----- -------
--------- -----
--
--
------ -
------ -
-------- -----
--------- ---
--
--
-------- -
------------- -
-- -------------- -
------------------ -
--------- --------------
-------- -------------
---
------------ - -----
-
--
--
--------- -
----------------- -- -
----------------------
---
--
--------- -
----------------------
--
------ -
------------------ -
-- ---------------- - ---- -
----------------------
-
--
--
--
---------在上面的代码中，我们定义了一个聊天室界面，包括用于显示消息和用于输入新消息的表单。
main.js
在 main.js 文件中，我们将创建一个 Vue 实例，用于整个应用的管理。
-- -------------------- ---- -------
------ --- ---- ------
------ ----- ---- --------------
------ ---- ---- -------------
------ -- ---- -------------------
----- ------ - ----------------------------
--- -----
--- -------
----------- -
------
-----
--
------ -
------ -
--------- -----
----------- ------
--------- ---
--
--
-------- -
--------------- -
------------- - ---------
--------------- - -----
--
-------------------- -
---------------------- ---------
--
----------------------- -
----------------------------
--
---------------- -
----- -------- - --------------------
------------------ - ----------------------
--
--
--------- -
-------------------- ---------------------
--
--------- -
----------------------
--
--------- -
-----
------ ------------------ -------------- --
----- ----------------- -------------------- -------------------- ------------------- --
------
--
---在上面的代码中，我们定义了一个应用实例，并把 Login 和 Chat 组件注册为全局组件。我们也定义了一些方法用于管理整个应用实例并通过 Socket.io 进行实时通信。
Express.js 部分
上面我们已经完成了前端部分的开发，现在我们来进行服务端的开发。
首先，我们需要在项目目录中创建一个新的目录，用于存放服务端代码。
接着，在服务端目录中执行以下命令以安装 express 和 socket.io：
npm install express socket.io --save
server.js
在服务端目录中，我们创建一个新的文件 server.js，用于启动服务和处理请求。
-- -------------------- ---- -------
----- --- - ---------------------
----- ------ - ----------------------------------
----- -- - ---------------------------- -
----- -
------- ----
--
---
----- ---- - -----
------------------- -------- -- -
-------------- ---- ------------
-------------------- --------- -- -
------------------ ---------
---
----------------------- -- -- -
-------------- ---- ---------------
---
---
------------ ----- ---- -- -
---------------- -- ----------
---
------------------- -- -- -
------------------- -- ------- -- ---- ----------
---在上面的代码中，我们使用 express 框架创建一个 http 服务器，并使用 socket.io 创建一个 WebSocket 连接。我们使用 io.on() 方法监听客户端连接，并使用 socket.on() 方法监听客户端发送的消息。
运行应用
现在我们已经完成了服务端和客户端的代码编写，接下来我们来运行应用。我们需要在两个不同的终端分别运行以下命令：
# 在客户端目录中 npm run serve # 在服务端目录中 node server.js
完成上面的操作后，我们就可以在浏览器中访问 http://localhost:8080（默认端口号为 8080）来启动聊天室应用了。
总结
通过本次实战，我们学习了如何使用 Vue.js 和 Express.js 框架构建一个简单的在线聊天室应用。我们已经实现了以下功能：
- 登录界面：用于输入用户昵称。
- 聊天室界面：用于显示聊天消息和输入新消息。
- 实时通信：使用
socket.io来实现客户端和服务端的实时通信。
在这个项目的基础上，你可以继续增加更多的功能，比如支持聊天室分组、消息撤回等等，让它变得更加完善。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65460d3f7d4982a6ebfd378d