javascript
复制代码
// 安装 socket.io-client
npm i socket.io-client
import 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,name
pushMessage(arg){
this.soccket.emit('message',arg)
}
}
javascript
复制代码
// * 先安装 socket.io
npm 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.js
const { 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);
},
// * 獲取當前用戶 的 socket
getSocket(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,
});
})
});