通过vue-socket.io来实现聊天

后端使用nodejs Express 中间介 socket.io 来搭建监听服务，具体代码如下

服务端代码

const io = require('socket.io').listen(8800); //此处listen监听端口要与客户端那儿的端口一致。
let users = []; 用来存储user聊天用户
class Chat {
    constructor() {
        this.socket = null;
    }
    isExist(user) {
        let flag = false;
        users.every(item => {
            if (item.nickName == user.nickName) {
                flag = true;
                return false;
            }
        })
        return flag;
    }
    connection() {
        io.sockets.on('connection', (socket) => {
            this.socket = socket;
            this.login();
            this.disconnect();
            this.socket.on('postMsg', (msg, color) => {
                //this.socket.broadcast.emit 自己不会收到消息
                io.sockets.emit('newMsg', {
                    user: this.socket.user,
                    msg: msg,
                    color: color
                })
            })
            this.socket.on('img', (msg, color) => {
                this.socket.broadcast.emit('newImg', this.socket.user, imgData, color);
            })
        })
    }
    login() {
        this.socket.on('login', (user) => {
            console.log(user);
            if (this.isExist(user)) {
                this.socket.emit('nickExisted')
            } else {
                let address = this.socket.handshake.address + ":" + this.socket.handshake.address.port;
                user.address = address.replace('::ffff:', '');
                this.socket.userIndex = user.length;
                this.socket.user = user;
                users.push(user);
                this.socket.emit('loginSuccess');
                io.sockets.emit('system', {
                    type: 'login',
                    user: user,
                    users: users,
                    userCount: users.length
                });
            }
        })
    }
    disconnect() {
        this.socket.on('disconnect', function () {
            console.log(this.socket.user);

            if (this.socket.user != null) {
                console.log('exit');
                console.log(this.socket.user);

                users.splice(this.socket.userIndex, 1);
                io.sockets.emit('system', {
                    type: 'logout',
                    user: this.socket.user,
                    users: users,
                    userCount: users.length
                });
            }
        })
    }
}
module.exports = Chat;
 下面看看客户端代码 app.js 中 import VueSocketio from 'vue-socket.io';
Vue.use(VueSocketio, 'localhost:8800'); //与服务端链接 组件中使用 sockets: {
    connect: function() {
      //与socket.io连接后回调
      console.log("socket connected");
    },
    nickExisted() {
      TopTips({ message: "该昵称已被使用" });
      this.infoModel = true;
    },
    login: function(value) {
      console.log(value); //监听login(后端向前端emit  login的回调)
    },
    system(params) {
      console.log("响应system");
      let { user, users, userCount, type } = params;
      var msg =
        user.nickName + (type == "login" ? " 加入聊天室" : " 离开聊天室");
      console.log(msg);
      this.displayMsg(user, msg, "", "sys");
    },
    newMsg(params) {
      let { user, msg, color } = params;
      console.log("发送信息");
      this.displayMsg(user, msg, color, "msg");
    },
    loginSuccess() {
      console.log("login success");
      this.curUser.nickName = "我";
    },
    error(err) {
      TopTips({
        message: "连接失败",
        duration: 2000
      });
    }
  } 基本代码就是这样了，代码属于部分关键代码。

PHP Warning: curl_exec() has been disabled for security reasons in /home/ftp/f/free49568/wwwroot/wp-content/themes/Variant/functions.php on line 490 百度已收录