使用 Node.js 和 Socket.io 构建实时聊天应用程序

学习的知识点

主要是通过简易聊天室熟练掌握 stock.io 相关方法和运行的过程。

需要的插件

stock.io

梳理应用步骤

在进行实现简易实时聊天室之前,我们先梳理一下我们需要的功能和流程。

所需功能:

  • 1、告知用户已经连接到聊天室
  • 2、自己发送时,页面展示对应的消息展示,而对方看的到信息是谁发送了什么
  • 3、当用户关闭页面后,其他人会收到用户下线的通知

系统开发流程:

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

大致实现步骤

1、搭建实时聊天应用的页面,具体代码片段如下:

<div id="message_box">div>
<form id="send_box">
  <input type="text" id="message_input" />
  <button type="submit" id="send_button">发送button>
form>

2、搭建 socketio 服务

  • 1、安装所需插件

安装命令 npm install socket.io

  • 2、创建 socket.io 服务
const io = require("socket.io")(3000);
  • 3、创建 socket.io 连接

当我们创建了 socket.io 的服务后,我们还需要创建 io 连接后才能向客户端发送消息和定义消息监听。创建连接的具体代码如下:

io.on("connection", (socket) => {});
  • 4、创建对应服务端消息监听事件和发送对应消息给客户端

创建好 socket.io 连接后,我们就可以自定义客户端发送消息的监听事件,并且接收到消息后我们可以使用broadcast.emit方法来发送消息给。具体的代码如下:

/**
 * 服务端创建名为send-chat-message的消息监听
 * 客户端接收chat-message类的消息
 */
socket.on("send-chat-message", (message) => {
  console.log(message);
  socket.broadcast.emit("chat-message", message); // 发送消息给客户端
});
  • 5、搭建 socketio 的客户端

搭建 socketio 的客户端只要引入对应的依赖文件和连接对应的 socketio 服务就可以,具体的代码如下:


<script defer src="http://localhost:3000/socket.io/socket.io.js">script>
const socket = io("http://localhost:3000"); // 与socketio服务端进行连接
  • 6、客户端向 socketio 服务端发送消息
socket.emit("send-chat-message", message); // 向socket.io服务器发送消息
  • 7、服务端监听用户进入聊天室和告知客户端信息
socket.emit("new-user", useName); // 客户端发送姓名到执行的socketio接收器中

// 监听客户端发送过来的new-user类的消息
socket.on("new-user", (name) => {
  users[socket.id] = name;
  socket.broadcast.emit("user-connected", name);
});

核心代码片段

客户端

const socket = io("http://localhost:3000");

const useName = prompt("您的姓名是:");
appendMessage("你已经加入聊天系统");
socket.emit("new-user", useName);

socket.on("chat-message", (data) => {
  appendMessage(`用户${data.name}说了: ${data.message}`);
});

socket.on("user-connected", (data) => {
  appendMessage(`${data} 已连接`);
});

socket.on("user-disconnected", (data) => {
  appendMessage(`${data} 已下线`);
});

messageForm.addEventListener("submit", (e) => {
  e.preventDefault();
  const message = messageInput.value;
  appendMessage(`您发了:${message}`);
  socket.emit("send-chat-message", message); // 向socket.io服务器发送消息
  messageInput.value = "";
});

服务端

const io = require("socket.io")(3000);

io.on("connection", (socket) => {
  socket.on("new-user", (name) => {
    users[socket.id] = name;
    socket.broadcast.emit("user-connected", name);
  });

  socket.on("send-chat-message", (message) => {
    socket.broadcast.emit("chat-message", {
      message: message,
      name: users[socket.id],
    });
  });

  socket.on("disconnect", () => {
    socket.broadcast.emit("user-disconnected", users[socket.id]);
    delete users[socket.id];
  });
});

完整代码

完整代码示例下载

你可能感兴趣的:(NodeJS,node.js,javascript)