引言
Socket.io 是一款基于 Node.js 的实时通信库,能够在客户端与服务端之间实现无延迟的双向通信,适用于实时聊天、实时游戏等应用场景。本文将介绍如何使用 Socket.io 最基本的功能,实现一个多房间聊天应用。
准备工作
首先,我们需要安装 Socket.io。
npm install socket.io --save
然后,在服务端(Node.js)中引用并启动 Socket.io。
-- -------------------- ---- ------- -- -------- ----- ---- - ---------------- ----- -------- - --------------------- ----- ------ - ----------------------- ---- -- - -------------- --------- --- ----- -------- - ----------------- ------------------------- -------- -- - ------------------- ------------- --- ------------------- -- -- - ------------------- ------- -- ---- ------- ---
客户端(HTML)中引用 Socket.io 的 JavaScript 库。
<!-- index.html --> <script src="/socket.io/socket.io.js"></script>
单房间聊天应用
首先,我们来实现一个单房间聊天应用。
首先,服务端需要添加一个事件监听器,以便接收客户端发来的消息。
-- -------------------- ---- ------- ------------------------- -------- -- - ------------------- ------------- -------------------- ----- -- - --------------------- -------- --------- ---------------------- ----- --------- -------------------------------- -------- --------- --- ---
然后,在客户端中,添加一个表单来发送消息,并监听表单提交事件。
-- -------------------- ---- ------- -- ------- ----- ------ - ------------------------------- ----- ------- - --------------------------------------------- ----- ---------- - ------------------------------------ ----- ------ - ----- --------------------------------- --- -- - ------------------- ----- --- - -------------- ------------- - --- ------------------------------------------ --------- -------------- ---------------------- ----- --- -------------------- ----- -- - ------------------------------------------ ------------------- ---
注意,这里的
socket.emit('message', msg)
发送消息的目标是服务器。服务器收到消息之后,会将消息广播给所有客户端。
运行程序,即可看到在一个房间内可以实现聊天功能。
多房间聊天应用
在实际的应用场景中,我们可能需要将用户分到不同的房间中,以便实现不同的业务逻辑。下面,我们将实现一个简单的多房间聊天应用,使得每个房间内的用户之间可以互相聊天。
服务端需要维护一个房间列表,并且将每个新连接的客户端加入到一个默认房间中。
-- -------------------- ---- ------- ----- ----- - --- ------ -------------------- --- ------- ------------------------- -------- -- - ------------------- ------------- -- ------ ----------------------- --------------------------------- -------------------- ----- -- - --------------------- -------- --------- ---------------------- ----- --------- ------------------------------------------ -------- --------- --- -- -------------- ---------------------- ---------- -- - -- ------------ ----- ------------ - ---------------- -- -------------- - --------------------------------------- --------------------------- - -- ------------- ---------------------- --------------- - --------- -- ---------------------- - ------------------- --- ------- - -------------------------------- ---------------------- ---- ------ ---- -------------- ----------------------------------- -- --- ---- ------ ---- -------------- --- ---
客户端要求用户输入要加入的房间,然后发送加入房间请求。
-- -------------------- ---- ------- -- ------- ----- ---------- - ------------------------------------- ----- ----------- - -------------------------------------- ----- ---------- - ------------------------------------- ----- ---------- - ------------------------------------ ----- ------ - ----- ------------------------------------- --- -- - ------------------- ----- -------- - ------------------ ----------------- - --- ------------------------ ---------- ---------------------- - --------- --- -------------------- ----- -- - ------------------------------------------ ------------------- ---
在 HTML 页面中添加一个表单,以便用户输入要加入的房间名:
-- -------------------- ---- ------- ----- --------------- ------ --------------------- ----- -------- ------ ----------- ---------------- --------------------- ------- --------- ----- ---------------------------------- --- -------------------
然后我们可以在另一个浏览器窗口中打开应用,输入不同的房间名,就可以看到不同的用户之间聊天了。
总结
本文介绍了 Socket.io 的基本用法,并实现了一个多房间聊天应用。Socket.io 能够在 Node.js 与浏览器之间实现实时通信,本文实现的聊天应用只是它众多应用场景中的一个。在实际的开发工作中,我们可能会用到 Socket.io 来实现更加复杂和实用的功能。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64a77d3a48841e98943fda51