前端界面已经成为了我们生活和工作的重要组成部分。为了给用户提供更好的交互体验，实时聊天已经成为了不可或缺的一部分。而 websocket 技术，则是实现实时聊天的主要方式之一。
在本文中，我们将使用 Express.js 框架来构建一个基于 websocket 的实时聊天应用。我们会学习到如何使用 websocket 技术，如何搭建聊天服务器，以及如何实时更新前端界面。
什么是 websocket？
websocket 是 HTML5 提供的一种新的网络通信协议，它为浏览器和服务器之间的双向通信提供了更简单、更快捷和更高效的方式。
与传统的网络通信方式（如 AJAX）相比，websocket 只需要一个 HTTP 握手阶段，便可以通过一个 TCP 连接实现全双工通信。这使得它的通信速度更快、更实时，也减少了开销和延迟。
搭建聊天服务器
首先，我们需要创建一个 websocket 服务器。在本文中，我们将使用 Express.js 和 Socket.io 实现。
首先，需要安装依赖：
npm install express socket.io
然后，在 Express.js 中创建服务器：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ----- ------ - ---------------------------- ----- -- - ----------------------------- ------------ ----- ---- -- - ---------------------- - --------------- --- --------------------
此时，服务器已经可以在本地 3000 端口上监听请求了。
接下来，我们需要实现基本的聊天功能。在 Socket.io 中，所有的事件都是基于emit和on这两个方法的。比如，以下代码实现了一个基本的广播功能：
-- -------------------- ---- -------
------------------- -------- -- -
-------------- ---- ------------
--------------- --------- ----- -- -
------------- --------- -----
---
----------------------- -- -- -
----------------- ---------------
---
---在上面的例子中，我们将 io.emit 用于向所有客户端广播消息。socket.on 方法用于监听客户端的特定事件并返回数据。
实现前端界面
现在，我们已经有了一个工作的聊天服务器，接下来我们需要实现一个前端界面，使用户能够与服务器交互。
在以下代码中，我们使用 jQuery 来监听消息，并在 DOM 中添加当前的聊天记录：
-- -------------------- ---- -------
---------- -- -
----- ------ - -----
----- -------- - ---------------
----- ----- - ----------
----- ------ - -------------------------
---------------- -- -
-------------------
----------------- --------- --------------
---------------
------ ------
---
--------------- --------- ----- -- -
-------------------------------------
---
---在这个简单的例子中，我们使用了 $msgList，$form 和 $input 三个变量来提取 DOM 元素。然后，我们使用 submit 方法来监听表单的提交事件，并向服务器发送一条新的消息。最后，我们使用 socket.on 方法来监听服务器发回的广播事件。在此例子中，我们在 li 元素中展示了所有消息。
总结
通过本文，我们已经学会了如何使用 Express.js 和 Socket.io 实现基于 websocket 的实时聊天应用，以及如何在前端界面中实现数据的更新。
websocket 技术不仅在实时聊天应用中发挥了重要作用，还在其他很多领域得到了广泛应用。有了这个例子，我们不仅可以更好地理解 websocket 技术的实现原理，还可以将其应用到实际项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6468b254968c7c53b08dfe54