socket.io+nodejs+vue實時通訊

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事件
    }
  }
};

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章