使用 Node.js 和 Socket.io 构建可创建、可加入房间的实时聊天室

这篇具有很好参考价值的文章主要介绍了使用 Node.js 和 Socket.io 构建可创建、可加入房间的实时聊天室。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

学习知识点

通过可以加入房间的聊天室应用程序,首先可以回顾 Socket.io 的基本使用方法和流程,并在此基础上我们学习jointo两个 API 方法,从而实现简易的可加入房间的聊天系统。

需要的插件

Socket.ioexpressejs

梳理应用步骤

在实现应用程序之前,我们先梳理一下我们需要的功能和流程。

所需功能:

  • 1、用户可以自己创建聊天房间或者加入聊天房间
  • 2、消息的发送只能在对应的房间内发送
  • 3、当用户关闭页面后,其他人会收到用户下线的通知

系统开发流程:

  • 1、搭建 socketio 服务
  • 2、创建服务端与客户端成对的消息交互事件
  • 3、创建服务端与客户端用户上线和下线交互事件

实现步骤

1、使用ejs编写房间页面

房间页面主要包含两个功能:

  • 1、展示已创建的房间
  • 2、创建房间

具体代码如下:

<!-- 房间列表 -->
<div id="room_box">
  <% Object.keys(rooms).forEach(room=> { %>
  <div><%= room %></div>
  <a href="/<%= room %>">加入房间</a>
  <%}) %>
</div>

<!-- 创建房间表单 -->
<form action="/room" method="post">
  <input name="room" type="text" required />
  <button type="submit">创建新房间</button>
</form>

2、使用express创建对应的请求路由和业务处理

app.get("/:room", (req, res) => {
  if (rooms[req.params.room] === null) {
    res, redirect("/");
  }

  res.render("room", { roomName: req.params.room });
});

app.post("/room", (req, res) => {
  // 判断房间是否已经存在
  if (rooms[req.body.room]) {
    return res.redirect("/");
  }

  rooms[req.body.room] = { users: {} };
  res.redirect(req.body.room);

  io.emit("room-create", req.body.room);
});

3、客户端创建监听新建房间的消息

客户端创建监听新建房间的消息,从而可以实时的展示房间列表,具体代码如下:

socket.on("room-create", (room) => {
  const _divEL = document.createElement("div");
  _divEL.innerText = room;

  const _aEl = document.createElement("a");
  _aEl.innerText = `您已加入房间`;
  _aEl.href = `/${room}`;

  roomBox.append(_divEL);
  roomBox.append(_aEl);
});

4、客户端发送创建用户消息到 socketio 服务并加入对应的房间

当用户创建好房间后,页面会跳转到具体的聊天房间页面,进入房间页面后我们需要让页面发送对象的 socketio 消息,这样才能加入具体的房间。具体代码如下:

// 客户端
socket.emit("new-user", roomName, useName);

// 服务端
socket.on("new-user", (room, name) => {
  rooms[room].users[socket.id] = name;
  socket.join(room);
  socket.to(room).emit("user-connected", name);
});

5、实现服务端和客户端消息发送的 socketio 功能

这里的功能可以参考使用 Node.js 和 Socket.io 构建实时聊天应用程序的代码。

只是我们再发送消息的时候要使用 socketio 的to方法来加入对应的房间后在发送消息。具体代码判断如下:

socket.to(room).emit("chat-message", {
  message: message,
  name: rooms[room].users[socket.id],
});

完整代码

完整代码示例下载文章来源地址https://www.toymoban.com/news/detail-604375.html

到了这里,关于使用 Node.js 和 Socket.io 构建可创建、可加入房间的实时聊天室的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • websocket实时通讯和socket.io实时通信库的使用;心跳机制与断线重连

    https://zh.javascript.info/websocket WebSocket 是一种网络通信协议,就类似于 HTTP 也是一种通信协议。 为什么需要 WebSocket? 因为 HTTP 协议有一个缺陷:通信只能由客户端发起。 代码解析: 创建WebSocket实例:通过 new WebSocket() 创建一个WebSocket实例。在括号中传入服务器的URL,该URL指定了

    2024年02月16日
    浏览(41)
  • 如何在Node.js中使用WebSocket实现实时通信

    在Web应用程序中,实时通信已经成为一种必不可少的功能。WebSocket是一种基于TCP的协议,它提供了双向通信的能力,使得实时通信变得更加容易。Node.js提供了一个内置的WebSocket模块,使得开发实时通信应用程序变得非常简单。在本文中,我将介绍如何在Node.js中使用WebSocket实

    2024年02月14日
    浏览(45)
  • 使用Node.js创建接口

    当使用Node.js创建接口时,有两种主要方式:使用Express框架和使用Node.js的HTTP模块。 Express框架方式: 总的来说,使用Express框架可以更快速地搭建和管理接口,而使用Node.js的HTTP模块则提供了更多底层控制和灵活性,适用于对请求和响应处理有更高要求的情况。 便捷性和简洁

    2024年02月04日
    浏览(55)
  • 如何使用websocket+node.js实现pc后台与小程序端实时通信

    实现功能:实现pc后台与小程序端互发通信能够实时检测到 1.安装ws依赖 2.创建index.js 3.打开终端,启动服务 这里是手动点击连接按钮,发起的websocket连接,可自行更改到其他合适的地方连接websocket 1.创建两个按钮,连接按钮,发送按钮 2.定义事件,连接ws

    2024年02月03日
    浏览(44)
  • 使用Hook拦截socket函数解决虚拟局域网部分游戏联机找不到房间的问题——以文明6为例

    许多单机游戏都有局域网联机功能,尽管有些也提供了互联网联机功能,但是一般这些游戏的土豆服务器让玩家非常恼火,于是诸如游侠等对战平台则是其中一种选择。使用这些平台提供的局域网联机功能就可以获得比较稳定的联机体验。还有一种方法就是搭建虚拟局域网

    2024年02月16日
    浏览(45)
  • 如何实现前端实时通信(WebSocket、Socket.io等)?

    聚沙成塔·每天进步一点点 前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而

    2024年01月22日
    浏览(45)
  • k8s node 误删除了如何自动创建 csr重新加入集群

    worker node 节点当部署晚 kubelet、kube-proxy就会加入集群,如何加入呢, 集群收到新的 csr 参考: https://kubernetes.io/zh-cn/docs/reference/access-authn-authz/certificate-signing-requests/ https://blog.csdn.net/Michaelwubo/article/details/113769391

    2024年02月13日
    浏览(45)
  • 在Node.js中使用MongoDB连接数据库、创建集合

    本文主要介绍在Node.js中使用MongoDB连接数据库、创建集合的方法。 在Node.js中使用MongoDB连接数据库有两种方式:使用原生驱动程序和使用Mongoose。 首先,需要安装 mongodb 模块。可以通过以下命令来安装: 安装完成后,可以在代码中引入模块: 接着,可以使用 MongoClient 来连接

    2024年02月04日
    浏览(49)
  • 如何使用Node.js快速创建本地HTTP服务器并实现异地远程访问

    Node.js 是能够在服务器端运行 JavaScript 的开放源代码、跨平台运行环境。Node.js 由 OpenJS Foundation(原为 Node.js Foundation,已与 JS Foundation 合并)持有和维护,亦为 Linux 基金会的项目。Node.js 采用 Google 开发的 V8 运行代码,使用事件驱动、非阻塞和异步输入输出模型等技术来提高

    2024年02月05日
    浏览(63)
  • 使用Node.js和Web3.js实现链接MetaMask钱包并批量创建钱包并且批量发送代币

    MetaMask是一款基于浏览器的插件钱包,它可以安全地存储、发送和接收以太坊(Ethereum)代币。而Web3.js是一款JavaScript库,可以通过它连接以太坊区块链网络并管理以太坊钱包。 在此文中,我们将学习如何使用Node.js和Web3.js编程语言编写代码,实现链接MetaMask钱包并批量创建钱

    2024年02月08日
    浏览(73)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包