Vue + Nodejs + socket.io 实现聊天

Vue  代码

// 安装  socket.io-clientnpm i socket.io-clientimport io from 'socket.io-client';mounted () {// * location.origin 表示你的 socket 服务地址// * /XXXX/socket.io 表示 你的 socket 在服务器配置的 访问地址let socket = io(location.origin, {path: "/XXXX/socket.io"});this.soccket = socket;// 将 socket 挂载到全局this.$store.commit('setSocketMain', socket);// * 監聽 socket 鏈接成功socket.on('connect', () => {// userInfo 表示用户信息socket.emit('user:login', userInfo); // 发送一个自定义事件，如'user:login'，以及用户信息  });// * 监听收到消息socket.on('message', message => {console.log('接收到信息', message);let  text = `${message.name}:${message.text}`;this.$notify({title: '消息提醒',dangerouslyUseHTMLString: true,message:text,type: "success",duration: 2000});// * 将消息显示在页面上this.pushMessage(message.text};})},methed:{// * 发送消息, 包含了 text,uid,toUid,fId,namepushMessage(arg){this.soccket.emit('message',arg)}}

NodeJS 代码

// * 先安装 socket.ionpm i socket.io// * 修改启动文件, 比如我的是 www.js
const express = require('express');
const http = require('http'); // 引入 http 模块
const socketIo = require('socket.io'); // 引入 socket.io 模块
// 实例化一个 express的对象
const app = express();
// 创建一个 HTTP 服务器实例
const server = http.createServer(app);
// 实例化 Socket.IO 并将其附加到 HTTP 服务器实例
const io = socketIo(server, {path: '/XXXX/socket.io', // 假设你的命名空间是 '/XXXX' , 这里也对应了 vue 那里的值
});//监听3000端口
server.listen(3000, function () {var host = server.address().address;var port = server.address().port;if (host == '::') {host = 'localhost:';}console.log(`启动成功访问地址 http://${host}${port}`);
});//暴露
module.exports = { app, io };// * 其中,  app 会 被 app.js 所引用, 作为启动// * io 可以在需要socket 的地方引用, 如 message.jsconst { io } = require('../../bin/www');// * socket 方法
const _socket = {// * socket - user 對象sockets: [],// * 用戶登錄login(socket, user) {this.sockets.push({uId: user.id,socketId: socket.id,socket: socket,});},// * 登出logout(socketId) {console.log('用戶離線');let u = this.sockets.filter((item) => item.socketId == socketId);if (u.length > 0) this.sockets.splice(this.sockets.indexOf(u[0]), 1);},// * 獲取當前用戶 的 socketgetSocket(e) {console.log('獲取當前用戶:', e);let u = this.sockets.filter((item) => item.socketId == e || item.uId == e);if (u.length > 0) return u[0];return {};},// * 發送消息pushMessage(e, message) {let user = this.getSocket(e);let socket = user.socket;if (socket) {socket.emit('message', message);} else {console.log(`用戶離線或用戶不存在`);}},
};// * 设置 Socket.IO 事件监听器
io.on('connection', (socket) => {let socketId = socket.id;// * 監聽用戶登錄socket.on('user:login', (user) => {console.log('有用戶上線了', user);_socket.login(socket, user);});// * 登出socket.on('user:logout', () => {socket.leave(socketId);_socket.logout(socketId);});// * 当客户端断开连接时socket.on('disconnect', () => {socket.leave(socketId);_socket.logout(socketId);});// * 监听接收消息socket.on('message',(arg)=>{const { fId,uid,name,toUid,text } = arg;// * 发送给指定人_socket.pushMessage(toUid, {fId: fId,uid: uid,toUid: toUid,name: decodeURI(name),text: text,});})
});