前言
Socket.io 是一种实现 socket 通信的库，支持前端与后端实时双向的数据传输。它是基于 Websocket 的，但相比原生 Websocket 存在更多优点，比如支持多种传输方式、可靠性好等等。在这篇文章中，我们将学习如何使用 Socket.io 搭建一个在线聊天室。
基础知识
在开始学习 Socket.io 之前，我们需要了解一些前置知识。
- 后端语言和框架
Socket.io 支持众多的后端语言和框架，比如 Node.js、PHP、Python 等等，但无论选择何种语言和框架，我们需要确保能够使用 Socket.io 的相应库。
在本文中，我们将使用 Node.js 平台和 Express.js 框架。
- 前端框架
前端框架可自行选择，但需要有一定的前端基础。
在本文中，我们将使用 Vue.js。
- Socket.io 客户端
Socket.io 通过提供客户端 JS 库来支持浏览器端的实时双向数据传输。在学习 Socket.io 过程中，我们需要了解如何在前端中引入和使用 Socket.io 客户端库。
步骤
接下来，我们将一步步搭建一个在线聊天室。
- 安装依赖
安装 Node.js 和 npm，然后使用以下命令初始化一个新的 Node.js 项目：
npm init -y
接着，我们安装所需的依赖：
npm install express socket.io
- 创建服务端
我们在项目根目录下创建一个 server.js 文件，用于搭建服务端。
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- -------------------------------- - ------------ ----- ------ - ---------------- -- -- - ------------------- ------- -- ---- ------- --- ----- -- - ----------------------------- ------------------- -------- -- - ------------------- ------------- ----------------------- -- -- - ------------------- ---------------- --- ---展开代码
我们创建一个 Express.js 应用，并使用静态资源中间件将 public 文件夹挂载到根目录。然后，我们创建一个 Socket.io 实例，将其附加到服务器上，并监听一个 connection 事件。
在 connection 事件回调函数中，我们输出一条信息表示客户端已经连接。当客户端断开连接时，我们也将输出一条信息。
- 创建客户端
我们在 public 文件夹下创建一个 index.html 文件，用于搭建客户端。
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ---------------- ---------------- ------- ------ ---- --------- ---- ---------------- ----------- -- --- ---- ----- -- -------- -------- --- -------------- --- -------------- -- ------------ ------- ------- ----- ----- ------------------------------ ------ ----------------- ------------------- --------------------- ------- ------ ---- ------- ------ ------------------ ------------------- ----- ---- ---------- ------- -------------------------------------------- ------ ------ ------- --------------------------------------- ------- ------------------------------------------------ ------- ---------------------- ------- -------展开代码
这里，我们使用 Vue.js 实现了一个简单的聊天室界面。用户首先需要输入用户名，然后才能进入聊天室。
在文件底部，我们引入了 Socket.io 客户端库和 app.js 文件。
- 实现客户端逻辑
我们在 public 文件夹下创建一个 app.js 文件，用于编写客户端逻辑。
-- -------------------- ---- ------- ----- ------ - ----- --- ----- --- ------- ----- - --------- --- -------- --- --------- -- -- -------- - ------------- - ----------------- --------- - --------- -------------- -------- ------------ --- ------------ - --- -- ------------- - -- ---------------------- - ------------- - --------------------- - ---- - ------- - - - --- --------------- --------- ----- -- - --- ----- ------ - ------ - --------- ----- -- -- --------- - ----------------- -- - ----- -------- - ------------------------------------ ------------------ - ---------------------- --- - ----------------------- ---展开代码
首先，我们创建一个 socket 实例，并使用 Vue.js 实现了一个简单的聊天室界面。用户输入消息后，点击发送按钮，我们使用 socket.emit 方法发送一个消息到服务器。
然后，我们在客户端中监听 chat message 事件。当服务器发送一个 chat message 事件时，我们使用 Vue.js 将消息显示在聊天室界面上。
注意：在 Vue.js 2.0 中，一般不推荐在 mounted 钩子中使用 $nextTick。但是，由于我们需要在 DOM 更新后滚动到底部，所以我们在 $nextTick 中执行这个操作。
- 运行项目
我们按照以下命令启动服务器：
node server.js
然后在浏览器中访问 http://localhost:3000，即可看到聊天室界面。手动打开多个浏览器窗口，输入用户名后即可愉快地聊天啦！
结束语
通过学习和实践本文内容，我们了解了 Socket.io 的基础知识，并学会了使用 Socket.io 搭建一个在线聊天室的全过程。Socket.io 还有更多的用法，比如实现其他实时应用、游戏等等。希望这篇文章能帮助你掌握 Socket.io 相关技术，为你未来的前端开发工作带来帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c4394a6e1fc40e36d1dcd3
