java加vue使用websocket_vue中，使用websocket->vue-socket.io

前端

1、npm install vue-socket.io --save

2、在main.js编写，引入vue-socket

import VueSocketio from 'vue-socket.io';

​

Vue.use(new VueSocketio({

debug: true,

connection: 'http://localhost:8080' //地址+端口，由后端提供

}));

3、在组件中编写

home {{text}}

发socket信息

​

export default {

name: 'home',

data() {

return {

text: '这是首页'

}

},

mounted() {

​

//触发后台socket事件

this.$socket.emit('joinGroup', {

group: 'wwwqqq'

});

​

//添加socket事件监听

this.sockets.subscribe('clientEventMessage', (data) => {

console.log(data);

});

},

methods: {

sendSocketMsg() {

this.$socket.emit('serverEventMessage', {

group: 'wwwqqq'

});

}

}

}

后端，node.js实现

socket实现部分代码，参见如下：

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

module.exports = function(server){

var io = socket(server);

//监听客户端连接

io.on('connection', function (socket) {

//加入分组

socket.on('joinGroup', function (data) {

console.log("加入分组："+JSON.stringify(data));

console.log("socket-id："+socket.id);

socket.join(data.group,function(){

console.log('rooms:'+JSON.stringify(socket.rooms)); // [ , 'room 237' ]

io.to(socket.id).emit('clientGetSocketId',{

socketId:socket.id

})

});

});

//vue scoket监听测试

socket.on('serverEventMessage',function(data){

console.log("服务端接受数据："+JSON.stringify(data));

console.log("socket-id："+socket.id);

var room = data.group;//发送消息客户端所在分组

io.to(socket.id).emit('clientEventMessage',{

msg:'socket.id发送'

});

io.to(room).emit('clientEventMessage',{

msg:'room 发送'

});

});

});

};