一、简介
WebSocket是一种网络通信协议，它提供了在单个TCP连接上进行全双工通信的功能。在下面这个聊天应用示例中，WebSocket被用于实现实时的聊天功能，包括用户之间的消息发送、接收，用户状态管理以及其他相关的交互操作，为用户带来流畅的聊天体验。
二、后端实现
（一）模块引入与初始化
后端代码基于Node.js实现。首先，引入必要的模块：
const { WebSocketServer } = require("ws");
const WebSocket = require("ws");
const { getOneUserInfo } = require("../service/user");
const { createChat } = require("../service/chat/index");
// 在线列表
const onlineList = [];
initWebsocket函数是整个WebSocket后端功能的核心初始化函数：
const initWebsocket = () => {
// 设置WebSocket服务的端口号
const wss = new WebSocketServer({ port: 8889 });
if (wss) {
console.log("websocket Initialized successfully on port: " + 8889);
}
};
在这个函数中，创建了一个监听在8889端口的WebSocketServer实例（wss），并在创建成功后在控制台打印相应信息。
（二）连接事件处理
当有新的连接建立（wss.on("connection",... )）时：
1.错误处理
为每个新连接设置错误处理（ws.on("error", console.error);），这样当连接出现错误时，错误信息会在控制台输出，方便调试。
2. 消息处理
当新连接收到消息（ws.on("message",... )）时，先将接收到的消息数据解析为JSON对象，然后根据消息的type属性进行不同的处理：
- 初始化消息（init类型）
case "init":
if (message.user_id) {
// 为当前用户的 ws连接绑定 用户id 用于用户断开链接时 改变用户在线状态
ws.user_id = message.user_id;
const user = await getOneUserInfo({ id: message.user_id });
if (user) {
message.nick_name = user.nick_name;
message.avatar = user.avatar;
// 上线
keepLatestOnlineList("online", message);
}
} else {
sendOnlineToAll();
}
break;
当用户连接成功后发送初始化消息时，如果消息中包含user_id，则将该用户ID绑定到当前的WebSocket连接对象上。接着通过getOneUserInfo获取用户信息，如果获取成功，将用户的昵称和头像信息添加到消息对象中，并调用keepLatestOnlineList函数将用户标记为在线状态，同时向所有在线用户发送在线用户列表。若消息中没有user_id，则直接调用sendOnlineToAll函数。
- 普通消息（message类型）
case "message":
const user = await getOneUserInfo({ id: message.user_id });
if (user) {
message.nick_name = user.nick_name;
message.avatar = user.avatar;
}
const res = await createChat(message);
if (res) {
message.id = res.id;
}
wss.clients.forEach(function each(client) {
if (client.readyState === WebSocket.OPEN) {
client.send(JSON.stringify(message), { binary: false });
}
});
break;
对于用户发送的普通消息，先使用filterSensitive函数过滤消息内容中的敏感信息。然后通过getOneUserInfo获取用户信息并添加到消息对象中。接着调用createChat创建聊天记录，如果创建成功，将聊天记录的ID添加到消息对象中。最后，遍历所有连接的客户端，如果客户端处于打开状态，则将消息发送给该客户端。
- 撤回消息（revert类型）
case "revert":
if (message.message_id) {
wss.clients.forEach(function each(client) {
if (client.readyState === WebSocket.OPEN) {
client.send(JSON.stringify(message), { binary: false });
}
});
}
break;
当收到撤回消息的请求且消息中包含message_id时，遍历所有连接的客户端，将撤回消息的ID发送给所有在线客户端。
- 用户下线（offline类型）
case "offline":
if (message.user_id) {
// 下线用户
getOneUserInfo({ id: message.user_id }).then((user) => {
if (user) {
keepLatestOnlineList("close", { user_id: user.id, nick_name: user.nick_name });
}
});
}
break;
当收到用户下线消息且消息中包含user_id时，通过getOneUserInfo获取用户信息，然后调用keepLatestOnlineList函数将用户标记为离线状态。
- 连接关闭处理
当WebSocket连接被动断开（ws.on("close",... )）时：
ws.on("close", function () {
if (ws.user_id) {
getOneUserInfo({ id: ws.user_id }).then((user) => {
if (user) {
keepLatestOnlineList("close", { user_id: ws.user_id, nick_name: user.nick_name });
}
});
}
});
如果连接的ws对象有user_id，则获取用户信息，并调用keepLatestOnlineList函数将用户标记为离线状态。
（三）在线用户列表维护
keepLatestOnlineList函数用于维护在线用户列表：
function keepLatestOnlineList(type, message) {
let index = onlineList.findIndex((item) => item.user_id === message.user_id);
switch (type) {
case "online":
if (index!== -1) {
onlineList.splice(index, 1);
}
onlineList.push({
user_id: message.user_id,
nick_name: message.nick_name,
avatar: message.avatar,
createTime: new Date(),
});
console.log(message.nick_name + " 上线了...");
break;
case "close":
if (index!== -1) {
onlineList.splice(index, 1);
if (message.nick_name) {
console.log(message.nick_name + " 断开连接...");
}
}
break;
default:
break;
}
sendOnlineToAll();
}
它首先通过findIndex在onlineList中查找用户的索引。当用户上线（type为"online"）时，如果用户已在列表中则先删除旧记录，然后将新的用户信息添加到列表中，并在控制台打印上线提示信息。当用户离线（type为"close"）时，如果用户在列表中则将其删除，并在有昵称的情况下打印离线提示信息。最后，无论哪种情况，都会调用sendOnlineToAll函数向所有在线用户发送最新的在线用户列表。
sendOnlineToAll函数用于向所有在线用户群发在线人数信息：
function sendOnlineToAll() {
// 群发在线人数
let latestList = [];
wss.clients.forEach(function each(client) {
if (client.readyState === WebSocket.OPEN) {
latestList.push(client.user_id);
let message = JSON.stringify({
type: "onlineList",
list: onlineList,
});
client.send(message, { binary: false });
}
});
}
它遍历所有连接的客户端，将处于打开状态的客户端的user_id添加到临时列表中，然后创建一个包含在线用户列表的消息对象，将其序列化为JSON字符串后发送给所有在线客户端。
三、前端实现
（一）功能函数实现
1.发送消息函数（sendMessage和wsSend）
sendMessage函数是发送消息的入口：
const sendMessage = async () => {
messageType.value = "text";
if (!getUserInfo.value.id) {
ElNotification({
offset: 60,
title: "温馨提示",
duration: 3000,
message: h("div", { style: "color: #e6c081; font-weight: 600;" }, "请先登录"),
});
return;
}
if (!inputChatRef.value.innerHTML) {
ElNotification({
offset: 60,
duration: 3000,
title: "温馨提示",
message: h("div", { style: "color: #e6c081; font-weight: 600;" }, "请输入消息再发送"),
});
return;
}
if (websocket.readyState!== 1) {
// 重连后再发送
reConnect();
} else {
// 在线就 直接发送
wsSend();
}
};
它首先将messageType设置为"text"，然后检查用户是否登录和输入框是否有内容。如果WebSocket连接未处于打开状态，则调用reConnect函数重连后再发送；如果连接打开，则调用wsSend函数。wsSend函数根据messageType的值构建不同类型的消息（文本或图片）并发送：
const wsSend = () => {
let message;
switch (messageType.value) {
case "text":
if (!inputChatRef.value.innerHTML) return;
message = {
type: "message",
user_id: getUserInfo.value.id,
content: inputChatRef.value.innerHTML,
content_type: "text", // 信息是文本
};
websocket.send(JSON.stringify(message));
inputChatRef.value.innerHTML = "";
break;
case "image":
if (!yourImageUrl.value) return;
message = {
type: "message",
user_id: getUserInfo.value.id,
content: yourImageUrl.value,
content_type: "image", // 信息是文本
};
websocket.send(JSON.stringify(message));
yourImageUrl.value = "";
imageUpload.value && imageUpload.value.clearFiles();
break;
default:
break;
}
};
发送完成后进行相应的清理操作，如清空输入框或清除图片上传组件中的文件。
2.WebSocket初始化与重连（initWebsocket和reConnect）
initWebsocket函数用于初始化WebSocket连接，也可用于重连（通过参数isReconnect判断）：
const initWebsocket = async (isReconnect = false) => {
isConnecting.value = true;
// 如果说发现了异常 断开连接了 之前的websocket 还在的话就清空 重连
if (websocket) {
websocket.close();
websocket = null;
}
// websocket = new WebSocket("ws://mrzym.top/ws/");
websocket = new WebSocket("ws://localhost:8889/");
if (websocket) {
websocket.onopen = () => {
isConnecting.value = false;
websocket.send(
JSON.stringify({
type: "init",
user_id: getUserInfo.value.id || "",
})
);
console.log("WebSocket连接成功");
// 连上以后设置心跳检测 如果断开就重新连接 并清空之前的心跳检测 防止内存泄漏
clearInterval(heartBreak);
heartBreak = null;
heartBreak = setInterval(() => {
if (websocket.readyState!== 1) {
reConnect();
}
}, 30000);
};
websocket.onmessage = (event) => {
if (event.data) {
const data = JSON.parse(event.data);
let index;
// tips 表示提示 message 表示用户发送的消息
switch (data.type) {
case "tips":
if (isReconnect) {
// 这里重连就重新发送
wsSend();
console.log("重连成功");
} else {
ElNotification({
offset: 60,
title: "提示",
duration: 3000,
message: h("div", { style: "color: #7ec050; font-weight: 600;" }, data.content),
});
}
break;
case "message":
if (data.content) {
messageList.value.push(data);
if (data.user_id!== getUserInfo.value.id) {
newMessageCount.value++;
}
nextTick(() => {
scrollToBottom();
});
}
break;
case "onlineList":
onlineList.value = data.list;
index = onlineList.value.findIndex((item) => item.user_id === getUserInfo.value.id);
if (index === -1) {
clearWebsocket();
}
break;
case "revert":
index = messageList.value.findIndex((item) => item.id === data.message_id);
if (index!== -1) {
messageList.value.splice(index, 1);
}
break;
default:
break;
}
}
};
websocket.onerror = () => {
console.log("WebSocket连接错误");
};
} else {
console.log("WebSocket连接失败");
ElNotification({
offset: 60,
title: "错误提示",
duration: 3000,
message: h(
"div",
{ style: "color: #f56c6c; font-weight: 600;" },
"聊天室连接失败 正在重新连接"
),
});
if (timer) return;
timer = setInterval(() => {
reConnectionCount.value++;
initWebsocket();
// 连上了就不重连了
if (websocket) {
clearInterval(timer);
}
// 尝试五次 实在是连不上就不连了
if (reConnectionCount.value == 5) {
clearInterval(timer);
}
}, 5000);
}
};
在初始化过程中，先设置isConnecting为true，如果之前存在websocket则关闭它。然后创建一个新的WebSocket连接，连接成功后发送初始化消息，设置连接成功后发送初始化消息，设置心跳检测定时器。当接收到服务器消息时，根据消息类型进行处理，如处理提示信息、新消息、在线用户列表更新、消息撤回等。如果连接出现错误或连接失败，会进行相应的提示和重连操作。reConnect函数只是简单地调用initWebsocket并传入true：
const reConnect = () => {
initWebsocket(true);
};
3.其他功能函数
- getMessageList函数用于获取聊天消息列表：
const getMessageList = async () => {
loadingMessage.value = true;
const res = await getChatList({
size: 10,
last_id: messageList.value.length > 0? messageList.value[0].id : "",
});
if (res.code == 0) {
const list = res.result.list;
if (messageList.value.length > 0) {
if (Array.isArray(list) && list.length) {
messageList.value = list.concat(messageList.value);
if (list.length == 10) {
canLoadMore.value = true;
} else {
canLoadMore.value = false;
}
} else {
canLoadMore.value = false;
}
} else {
if (Array.isArray(list) && list.length) {
messageList.value = list;
if (list.length == 10) {
canLoadMore.value = true;
} else {
canLoadMore.value = false;
}
} else {
canLoadMore.value = false;
}
}
loadingMessage.value = false;
}
};
根据获取结果更新messageList和canLoadMore等响应式数据。
- clearHistory函数用于清空聊天记录：
const clearHistory = async () => {
ElMessageBox.confirm("确认清空吗", "提示", {
confirmButtonText: "确认",
cancelButtonText: "取消",
}).then(async () => {
const res = await clearChat();
if (res.code == 0) {
ElNotification({
offset: 60,
title: "提示",
duration: 3000,
message: h("div", { style: "color: #7ec050; font-weight: 600;" }, "聊天记录已清空"),
});
messageList.value = [];
canLoadMore.value = false;
}
});
};
通过弹框确认后调用clearChat API函数，并在成功后更新相关数据和显示提示信息。
- offlineUser函数用于强制某个用户下线：
const offlineUser = (user_id, nick_name) => {
ElMessageBox.confirm(`确认强制下线${nick_name}吗`, "提示", {
confirmButtonText: "确认",
cancelButtonText: "取消",
}).then(() => {
websocket &&
websocket.send(
JSON.stringify({
type: "offline",
user_id: user_id,
})
);
});
};
通过弹框确认后向服务器发送下线指令。
- scrollToBottom函数用于将聊天容器滚动到最底部：
const scrollToBottom = () => {
chatContainerRef.value &&
chatContainerRef.value.scrollTo({
top: chatContainerRef.value.scrollHeight,
behavior: "smooth",
});
};
以显示最新的聊天消息。
- selectIcon函数用于将用户选择的图标（如表情）插入到输入框中，并更新光标的位置索引：
const selectIcon = (val) => {
const text = val;
if (currentIndex.value == inputChatRef.value.innerHTML.length) {
inputChatRef.value.innerHTML += `${text}`;
} else {
// 拼接表情
let input = inputChatRef.value.innerHTML;
let start = input.slice(0, currentIndex.value);
let end = input.slice(currentIndex.value);
inputChatRef.value.innerHTML = start + `${text}` + end;
}
// 每次拼接完就加一下下标 一个表情的长度是两个字节
currentIndex.value += 2;
};
const keepIndex = () => {
currentIndex.value = getCurrentIndex();
};
function getCurrentIndex() {
var range;
if (window.getSelection) {
//ie11 10 9 ff safari
range = window.getSelection();
return range.focusOffset;
} else if (document.selection) {
range = document.selection.createRange();
return range.focusOffset;
}
}
- `handleChange`函数用于处理图片上传操作：
const handleChange = async (uploadFile) => {
imageUploading.value = true;
const img = await imgUpload(uploadFile);
if (img.code == 0) {
const { url } = img.result;
yourImageUrl.value = url;
messageType.value = "image";
wsSend();
imageUploading.value = false;
}
};
上传成功后更新相关数据并发送图片消息。
- revertOneChat函数用于撤回一条聊天消息：
const revertOneChat = async (id) => {
if (!id) return;
const res = await deleteOneChat(id);
if (res.code == 0) {
let index = messageList.value.findIndex((item) => item.id === id);
if (index!== -1) {
messageList.value.splice(index, 1);
}
// websocket 发送撤回消息的信息 通知其他用户撤回消息
websocket.send(
JSON.stringify({
type: "revert",
message_id: id,
})
);
ElNotification({
offset: 60,
title: "提示",
duration: 3000,
message: h("div", { style: "color: #7ec050; font-weight: 600;" }, "撤回成功"),
});
}
};
先删除本地消息列表中的消息，然后向服务器发送撤回消息的通知。
- clearWebsocket函数用于关闭WebSocket连接并清理相关的定时器资源：
const clearWebsocket = () => {
websocket && websocket.close();
websocket = null;
clearInterval(heartBreak);
heartBreak = null;
};
（二）数据监听与生命周期钩子
使用watch监听getUserInfo.value.id的变化，当用户ID改变时，重新初始化WebSocket连接并设置hasLoaded为true：
watch(
() => getUserInfo.value.id,
async () => {
await initWebsocket();
hasLoaded.value = true;
},
{
immediate: true,
}
);
同时监听chatVisible.value的变化，根据聊天窗口的可见性设置文档的overflowY样式：
watch(
() => chatVisible.value,
(newV) => {
if (newV) {
document.documentElement.style.overflowY = "hidden";
} else {
document.documentElement.style.overflowY = "visible";
}
},
{
immediate: true,
}
);
在onMounted生命周期钩子中调用getMessageList函数获取聊天消息列表：
onMounted(() => {
getMessageList();
});
在onBeforeUnmount钩子中调用clearWebsocket函数关闭WebSocket连接：
onBeforeUnmount(() => {
clearWebsocket();
});