socket.Io的简单使用

Posted 2021-04-25 知更鸟的早晨

在vue中使用socket.Io

安装 npm install socket.io

1创建一个socketIo.js的js文件

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

    //将加入的用户根据其传过来的id放入固定的房间中

    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)//3120为链接的端口号

搭载node.js服务器,在文件所在的位置打开命令行输入 node socketIo.js

2 在main.js中引入socket.io

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,

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

}

3在需要的接收的位置添加(入全局接收写在APP.vue中

sockets: {//和methods平级,socket.io触发的方法都写内部

        //断开重连

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

        }

    },

此sockets:{}可以写在任意的.vue文件中,当socketIo.js内部emit('方法名','传递的数据)时.所以文件内部sockets:{}里的特定方法都会被触发

最后是socket.Io的常用方法及API官网

//socket.io的API网站      https://www.cnblogs.com/dreamsqin/p/12018866.html

//发送

 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',"只有我不知道的消息")//通知分组内的用户不包括自己