Vue + Nodejs + socket.io 实现聊天

Vue 代码

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)
        }
    }

NodeJS 代码

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,
    });
  })
});