node後臺代碼
var app = require('express')();
var http = require('http').createServer(app);
//創建Server
var io = require('socket.io')(http);
//創建socket服務
io.on('connection', (socket) => {
//io.on connection 前端連接後自動觸發
//on接收,emit發送
console.log('a user connected');
socket.on('hello', (message) => {
//前端發送emit("hello",message)則進入此事件
console.log(message);
socket.join(message.roomName)
//join是進入房間,消息只發送在message.rommName房間內
io.to(message.roomName).emit("chaTmessage",{img:"你在這"});
//發送消息給這個房間,發送到前端監聽的chaTmessage事件
})
});
http.listen(2000, () => {
//配置socket端口,2000
console.log('listening on *:2000');
});
module.exports = app;
vue前臺代碼
import VueSocketIO from 'vue-socket.io'
Vue.use(new VueSocketIO({
debug: true,
connection: 'localhost:2000',
//socket地址,連接後直接觸發後臺connection事件
}))
export default {
data() {
return {
data: ""
};
},
mounted() {
// console.log(this.$socket);
},
sockets: {
chaTmessage(data) {//'chaTmessage'事件返回值
console.log('接收')
console.log(data);
},
hello(data) {//'hello'事件返回值
console.log(data);
},
message(data) {
console.log(data);
}
},
methods: {
clickButton: function() {
this.$socket.emit("hello", {roomName:'aaa',message:'你好'});//發送信息到後臺hello事件
}
}
};