Vue3 + Socket.io + Knex + TypeScript 实现可以私聊的聊天室-CFANZ编程社区

前言

下文只在介绍实现的核心代码，没有涉及到具体的实现细节，如果感兴趣可以往下看，在文章最后贴上了仓库地址。项目采用前后端模式，前端使用 Vite + Vue3 + TS；后端使用 Knex + Express + TS。目前项目还没有完全实现，文章的目的是记录阶段性“胜利”和分享知识。

关于搭建 TS 项目请看搭建 Webpack + TypeScript + Babel 的项目或者 JavaScript迁移。

Room 的概念

私密 Room

在开始做私聊功能之前，要掌握 Socket.io 的 Room 概念，当一个客户端连接到服务器时就会产生一个唯一的标识符，作为客户端的 ID。 socket.id 就可以拿到标识符：

<pre class="prettyprint hljs coffeescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">server.on("connection", (socket: any) => {
  console.log(socket.id);
});</pre>

一个 socket.id 就是一个私密的 Room，客户端 A 拿到客户端 B 的私密 Room，就可以通过 socket.to(room).emit('echo private', "Hello") 向客户端 B 发送私密信息。

公共 Room

任意一个字符都可以作为公共 Room，区别于私密 Room。客户端通过 socket.join(room) 加入公共 Room，服务器就可以使用 server.to(room).emit('public') 发送群聊消息的事件，而客户端只需要监听这个事件就可以拿到群聊消息。下图是公共 Room 的结构图：

Vue3 + Socket.io + Knex + TypeScript 实现可以私聊的聊天室

在本篇博文中，这一小节只是介绍 Socket.io 中私密 Room 和公共 Room 的区别。

开始

没有 Socket.io 基础的同学请看入门 Socket.io。下文只介绍实现私聊功能的基本步骤，不展示细节，比如 UI 的设计。

服务器

下面是服务器转交私密消息的实现步骤和代码：

服务器监听连接事件，当客户端 A 连接之后，服务器就监听客户端 A 的私密信息事件。

当客户端 A 发送私密信息事件之后，服务器就把私密信息转发给客户端 B。

<pre class="prettyprint hljs coffeescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">server.on("connection", (socket: any) => {
socket.on("emit-private", (e: any) => {
socket.to(e.socket_id).emit("echo-private", e);
});
});</pre>

客户端

客户端的实现步骤稍微复杂一些，客户端发送的私密消息需要封装到类，通过 emit 发送给服务器，再由服务器去转交消息给目标客户端。

（1）封装消息类：

<pre class="prettyprint hljs cpp" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">export class Message {
  public username: string;
  public text: string;
  public avatar: string;
  public popColor: string;
  public type?: string;
  public socket_id?: string;

  constructor(username: string, text: string, avatar: string, popColor: string, type?: string, socketId?: string) {
    this.username = username;
    this.text = text;
    this.avatar = avatar;
    this.popColor = popColor;
    this.type = type;
    this.socket_id = socketId;
  }
}</pre>

接收私密消息一方需要知道消息的用户名、消息文本、头像、Socket ID（私密 Room 标识符），其他的字段忽略不看。

（2）发送私密消息

下面是聊天室的 setup（组合式）代码，忽略了大量细节，只保留了核心代码：

<pre class="hljs fsharp" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 0.75em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">emit-private
</pre>

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">import { onMounted, ref } from "vue";
import { io } from "socket.io-client";
import { Message } from "../typescript/standard";

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

onMounted(() => {
  socket.on("echo-private", (e) => {
    console.log(e);
  });

  methods.onSendText = (text: string) => {
    let message = new Message(username, text, avatar, popColor, "others", socket_id);
    socket.emit("emit-private", message);
  };
});</pre>