學(xué)習(xí)的知識點(diǎn)

主要是通過簡易聊天室熟練掌握 Socket.io 相關(guān)方法和運(yùn)行的過程。

需要的插件

Socket.io

梳理應(yīng)用步驟

在進(jìn)行實(shí)現(xiàn)簡易實(shí)時(shí)聊天室之前，我們先梳理一下我們需要的功能和流程。

所需功能：

• 1、告知用戶已經(jīng)連接到聊天室
• 2、自己發(fā)送時(shí)，頁面展示對應(yīng)的消息展示，而對方看的到信息是誰發(fā)送了什么
• 3、當(dāng)用戶關(guān)閉頁面后，其他人會收到用戶下線的通知

系統(tǒng)開發(fā)流程：

• 1、搭建 socketio 服務(wù)
• 2、創(chuàng)建服務(wù)端與客戶端成對的消息交互事件
• 3、創(chuàng)建服務(wù)端與客戶端用戶上線和下線交互事件

大致實(shí)現(xiàn)步驟

1、搭建實(shí)時(shí)聊天應(yīng)用的頁面，具體代碼片段如下：

<div id="message_box"></div>
<form id="send_box">
  <input type="text" id="message_input" />
  <button type="submit" id="send_button">發(fā)送</button>
</form>

2、搭建 socketio 服務(wù)

• 1、安裝所需插件

安裝命令 npm install socket.io

• 2、創(chuàng)建 socket.io 服務(wù)

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

• 3、創(chuàng)建 socket.io 連接

當(dāng)我們創(chuàng)建了 socket.io 的服務(wù)后，我們還需要創(chuàng)建 io 連接后才能向客戶端發(fā)送消息和定義消息監(jiān)聽。創(chuàng)建連接的具體代碼如下：

io.on("connection", (socket) => {});

• 4、創(chuàng)建對應(yīng)服務(wù)端消息監(jiān)聽事件和發(fā)送對應(yīng)消息給客戶端

創(chuàng)建好 socket.io 連接后，我們就可以自定義客戶端發(fā)送消息的監(jiān)聽事件，并且接收到消息后我們可以使用broadcast.emit方法來發(fā)送消息給。具體的代碼如下：

/**
 * 服務(wù)端創(chuàng)建名為send-chat-message的消息監(jiān)聽
 * 客戶端接收chat-message類的消息
 */
socket.on("send-chat-message", (message) => {
  console.log(message);
  socket.broadcast.emit("chat-message", message); // 發(fā)送消息給客戶端
});

• 5、搭建 socketio 的客戶端

搭建 socketio 的客戶端只要引入對應(yīng)的依賴文件和連接對應(yīng)的 socketio 服務(wù)就可以，具體的代碼如下：

<!-- 引入socketio所需的依賴 -->
<script defer src="http://localhost:3000/socket.io/socket.io.js"></script>

const socket = io("http://localhost:3000"); // 與socketio服務(wù)端進(jìn)行連接

• 6、客戶端向 socketio 服務(wù)端發(fā)送消息

socket.emit("send-chat-message", message); // 向socket.io服務(wù)器發(fā)送消息

• 7、服務(wù)端監(jiān)聽用戶進(jìn)入聊天室和告知客戶端信息

socket.emit("new-user", useName); // 客戶端發(fā)送姓名到執(zhí)行的socketio接收器中

// 監(jiān)聽客戶端發(fā)送過來的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("你已經(jīng)加入聊天系統(tǒng)");
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(`您發(fā)了：${message}`);
  socket.emit("send-chat-message", message); // 向socket.io服務(wù)器發(fā)送消息
  messageInput.value = "";
});

服務(wù)端

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];
  });
});

完整代碼

完整代碼示例下載文章來源地址http://www.zghlxwxcb.cn/news/detail-548643.html

到了這里，關(guān)于使用 Node.js 和 Socket.io 構(gòu)建實(shí)時(shí)聊天應(yīng)用程序的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！