博客

前端使用vue框架

1.引入vue-socket.io包

在项目根目录运行，npm安装

npm install vue-socket.io --save

在vue项目文件main.js文件中增加以下代码

// socket.io消息中心
import VueSocketIO from 'vue-socket.io'


Vue.use(new VueSocketIO({
    debug: true,
    connection: ('http://localhost:3000'), //后端地址，自行修改

  })
);

后端npm安装

npm install socket.io

2.后端配置

在node服务器端app.js文件增加代码

var server = app.listen(3000);//后端监听端口

var io = require('socket.io')(server);

    io.on('connection', function (socket) {
        socket.on('online', value => {
            console.log('一个用户上线')
            socket.emit('connection', '欢迎上线')
        })

    })

3.前端配置

// 消息系统的接收
        sockets: {
            connection: function (data) {

                console.log(data);
            },
            
        },

4.系统进入页面立即会发送消息

前端打印 ‘欢迎上线’

后端打印 ‘一个用户上线’