客户端：Vue3，服务端：Node,基于Socket.IO实现单聊的功能

本文主要是介绍客户端：Vue3，服务端：Node,基于Socket.IO实现单聊的功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.介绍

2.环境搭建

3.本功能实现的主要逻辑

4.客户端和服务端的主要代码

5.效果展示

6.socket.io的运作原理

1.介绍

本篇主要讲讲基于Socket.IO实现单聊功能的主要实现，包括了客户端和服务端Node。

在这个即时通讯无处不在的时代，实时聊天功能已经成为我们日常生活和工作中不可或缺的一部分。无论是与朋友闲聊，还是与同事协作，单聊功能都是构建任何通讯平台的基石。今天，我们将一起探索如何利用前端界的新星——Vue 3，以及后端的强大工具——Node.js，结合实时通讯的利器Socket.IO，来打造一个高效、稳定的单聊应用。

在本篇文章中，我们将从零开始，一步步搭建起一个简单的单聊系统。我们会深入了解Vue 3的新特性，如Composition API，以及如何利用它们来构建响应式的用户界面。同时，我们也会探索Node.js的强大功能，以及如何通过Socket.IO实现实时数据的双向传输。

无论你是Vue的新手，还是希望将Socket.IO集成到现有Node.js应用中的开发者，本文都将为你提供实用的指导和深入的见解。我们将一起走过环境搭建、服务端设置、客户端实现、消息格式设计等关键步骤，最终实现一个完整的单聊功能。

2.环境搭建

前端可以使用Vue cli 或者使用 vite都可以，后端使用任何框架也可以，本案例中使用的是express框架。

当然，无论使用哪种方式，我们都得先下载socket.io

npm install socket.io
pnpm add socket.io
yarn add socket.io

或者是使用cdn:socket.io的cnd

然后我们需要搭建一些必要的代码框架，来展示单聊的功能。

在实际的聊天功能中的业务肯定比我这个案例要复杂的多，我这里就是只做一个demo，没有数据库的一些操作，就是实现单聊（单发信息）的功能。

客户端的设计：

我们可以实时的看到所有在线的用户，（聊天肯定有一个username，或者id，我们的这个username主要通过url中的query参数获取，这样可以不用操作数据库）
可以给单独某个用户发送信息，页面会渲染发送的信息详情。

服务端设计：

可以给客户端提供连接socket
可以实时的存储当前在线的用户并发送给客户端
可以接收消息给单独某个用户发送

3.本功能实现的主要逻辑

单聊是这篇文章的主要功能，其实其他很多的连接，是否断连，推送消息，接收消息等等功能从socket.io的官网的基础教程中就可以找到，主要是这个单聊的逻辑。

我们可以在客户端建一个user的数组，只要一有人连接，就往当中存储必要的username和userid，（注意这里的id是socket.io连接时创建的，每次都不唯一），如果有重连的就替换成新的id，有断连的就从当中剔除，然后再接收数据时可以查找到对应的id，给其单独的推送消息即可。

let userList = [] 
//监听接收消息的对象socket.on('sendMessage', (data) => {const targetSocket = io.sockets.sockets.get(data.id)const targetUser = userList.find((user) => user.id === data.id)if (targetSocket) {targetSocket.emit('receiveMessage', {sendForm: data.sendForm,toUser: targetUser.username,message: data.message,date: new Date().getTime()})}})

我们主要的还是通过id去进行单独推送信息。

然后客户端可以监听此信息，去接受服务端发来的数据

//监听接收信息socket.on("receiveMessage", (data) => {messageList.value.push(data)})

4.客户端和服务端的主要代码

客户端：

<template><div><!-- <router-view></router-view> --><button @click="createWebSocketConnection">建立Websocket连接</button><button @click="close">主动断开连接</button><ul><li v-for="i in userList" :key="i.id" @click="chooseUser = i.username, chooseid = i.id":class="{ active: i.username === chooseUser }">{{ i.username }}</li></ul><div class="text"><input type="text" v-model="message" @focus="handleFocus" @blur="handleBlur"><button @click="sendMessage">发送信息</button></div><h1>{{ typing }}</h1><!-- 聊天内容 --><div class="chat"><ul><li v-for="i in messageList" :key="i.id"><p>发送者：{{ i.sendForm }} ,接收者：{{ i.toUser }},内容：{{ i.message }}</p></li></ul></div></div>
</template><script setup>
import { io } from "socket.io-client";
import { useRoute } from "vue-router";
import { onUnmounted, ref } from 'vue'
const $route = useRoute()
const userList = ref([])
const message = ref('')
const messageList = ref([])
//选择当前需要发送信息的对象
const chooseUser = ref('')
const chooseid = ref('')
//谁正在输入中
const typing = ref('')
let socket = null
const createWebSocketConnection = () => {//随机生成一个usernamesocket = io("http://localhost:5000", {query: { username: $route.query.username },});socket.on('connect', () => {console.log('连接成功')console.log(socket.id);})socket.on("disconnect", () => {console.log('断开连接'); // undefined});socket.on("userList", (data) => {userList.value = data})//监听接收信息socket.on("receiveMessage", (data) => {messageList.value.push(data)})socket.on('receiveTyping', (data) => {console.log(data);typing.value = data.message})socket.on('receiveStopTyping', (id) => {typing.value = ''})
}
const closeWebSocket = () => {socket.close()
}
const sendMessage = () => {//发送信息const messageData = {//发送对象sendForm: $route.query.username,//接受对象receiveForm: chooseUser.value,//时间time: new Date(),id: chooseid.value,message: message.value}socket.emit("sendMessage", messageData)
}
//监听用户正在输入中
const handleFocus = () => {const data = {username: $route.query.username,tousername: chooseUser.value,id: chooseid.value,message: `${$route.query.username} 正在输入中...`}socket.emit('typing', data)
}
//监听用户停止输入
const handleBlur = () => {socket.emit('stopTyping', chooseid.value)
}
const close = () => {socket.emit('close', $route.query.username)closeWebSocket()
}
onUnmounted(() => {close()
})</script><style lang="css" scoped>
.active {color: red;
}
</style>

服务端：

const express = require('express')const app = express()
const { Server } = require('socket.io')
app.get('/', (req, res) => {res.send('Hello World!')
})//创建websocket服务器
const io = new Server(5000, {cors: {origin: '*' //配置跨域}
})
let userList = []//监听事件
io.on('connection', (socket) => {console.log('a user connected')const username = socket.handshake.query.usernameif (!username) {return}const userinfo = userList.find((user) => user.username === username)if (userinfo) {//存在userinfo.id = socket.id} else {userList.push({id: socket.id,username})}console.log(userList)socket.on('disconnect', () => {console.log('user disconnected')})//发送事件io.emit('userList', userList)//监听接收消息的对象socket.on('sendMessage', (data) => {const targetSocket = io.sockets.sockets.get(data.id)const targetUser = userList.find((user) => user.id === data.id)if (targetSocket) {targetSocket.emit('receiveMessage', {sendForm: data.sendForm,toUser: targetUser.username,message: data.message,date: new Date().getTime()})}})//监听断开连接的信息socket.on('close', (username) => {userList = userList.filter((user) => user.username !== username)console.log(userList)io.emit('userList', userList)})//监听谁正在输入的事件socket.on('typing', (data) => {const targetSocket = io.sockets.sockets.get(data.id)if (targetSocket) {targetSocket.emit('receiveTyping', data)}})//监听停止输入的事件socket.on('stopTyping', (id) => {const targetSocket = io.sockets.sockets.get(id)if (targetSocket) {targetSocket.emit('receiveStopTyping')}})
})app.listen(3000)