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

 

你可能感兴趣的:(nodejs)