vue创建Socket.io群聊天室

1引入

npm install vue-socket.io --save
npm i socket.io@2.1.1 -s(可能会因为版本问题出现错误)
需要看node_models的vue-socket.io的package

"dependencies": {
"socket.io-client": "^2.1.1"（这里是支持的版本）
},
安装

 npm install socket.io

发送

 socket.emit('addcart', {client: '我是客户端的数据'})

接收

socket.on('addcart', function(data) {
  console.log("获取到客户端数据", data)})

单发

socket.emit('to-client', "服务器的数据")//单发,谁发给我,我发给谁

群发

io.emit('to-client', "服务器的数据")//群发,给所有的用户都广播数据

分组

socket.join(roomID)//加入的分组id

分组群发

io.to(roomID).emit('addCart','群发消息')//通知分组内所有的用户

发分组其他人

socket.broadcast.to(roomID).emit('addCart',"只有我不知道的消息")//通知分组内的用户不包括自己

socket.join(rooms[, callback])：加入房间
socket.leave(room[, callback]) ：离开房间
socket.to(room)： 给房间发送消息
Socket自己本身就有一个唯一的id值,自己本身就是一个房间
加入分组
socket.on('group1', function (data) {
        socket.join('group1');
});
socket.emit('group1',id)，就可以加入group1分组；

node文件例子

var http = require('http');
var app = http.createServer(function(req, res) {
        res.end(data)
    })
console.log('app服务器开启成功');
//引入socket.io
var io = require('socket.io')(app)
    //connection为自带的方法,类似生命周期里面的创建,连接后就会触发
io.on("connection", function(socket) {
    console.log('一个用户与服务器建立连接', socket.handshake.query.id.toString())
    socket.join(socket.handshake.query.id.toString());
    //服务器获取客户端广播的数据
    socket.on('news', function(data) {
            for (let z = 0; z < data.newForMyApproval.length; z++) {
                io.to(data.newForMyApproval[z].toString()).emit('newForMyApproval', '增加了一条审批') //通知分组内所有的用户
            }
            for (let i = 0; i < data.newCcToMe.length; i++) {
                io.to(data.newCcToMe[i].toString()).emit('newCcToMe', '增加了一条抄送') //通知分组内所有的用户
            }
        })
        // 接收到消息页的消息
    socket.on("userChat", function(data) {
            io.to(data.receiveNews.toString()).emit('newNews', data)
        })
        // 当关闭连接后触发 disconnect 事件
    socket.on('disconnect', function() {
        console.log(socket.handshake.query.id.toString(), '与服务器断开连接');
    });
})
app.listen(3120)

vue文件Main.js

import VueSocketio from 'vue-socket.io';
if (JSON.parse(localStorage.getItem("USERNAMEID"))) { //判断本地是否有存用户id数据
    Vue.use(new VueSocketio({
            debug: true, //开发环境看socket.io的配置,开发结束改为false
            connection: '127.0.0.1:3120' + '?id=' + JSON.parse(localStorage.getItem("USERNAMEID")).id,
 options: {
            autoConnect: false//默认true，设为false不会全局引入socket
        },

        })) //connection为项目端口位置,"+"?id的内容为向socket.io传递连接用户的数据
}

Vue页面引用(sockets:{}与methods:{}平级)

 mounted() {
    this.$socket.open();//局部引入socket
  },
  beforeDestroy() {
    this.$socket.close();//退出组件时关闭socket
  },
 sockets: {
        //断开重连
        reconnect(data) {
            console.log("第几次重新连接", data);
        },
        // socket传进一条审批
        newForMyApproval(msg) {
            let data = this.$store.state.Advanced.forMyApproval + 1;
            console.log(msg);
            this.$store.dispatch("FETCH_forMyApproval", data);
        },
        // socket传进一条抄送
        newCcToMe(msg) {
            let data = this.$store.state.Advanced.ccToMe + 1;
            console.log(msg);
            this.$store.dispatch("FETCH_ccToMe", data);
        },
        // socket接收到其他用户传递的消息
        newNews(data) {
            if (this.$route.path != "/information") {
               this.$store.dispatch(
                    "FETCH_newspageNumber",
                    this.$store.state.Advanced.newspageNumber + 1
                );
            }
        },
        //获取当前在线用户的列表
        newUserMan(data){
            this.$store.dispatch("FETCH_newUserManArr",data);
        }
    },