vue-socket.io + nodejs实现实时通信，私聊，群聊

vue-socket.io + nodejs实现实时通信，私聊，群聊

写这篇文章主要是记录自己在学习中踩过的坑，目前技术不太成熟，有些不合理的地方还请大佬们指出，谢谢

直接粘代码吧

const app = require('express')();
const http = require('http');
const socketio = require('socket.io');

const server = http.createServer(app);

//设置允许跨域
app.all('*', function (req, res, next) {
      res.header("Access-Control-Allow-Credentials", true)
      res.header("Access-Control-Allow-Origin", "*")
      res.header("Access-Control-Allow-Headers", "X-Requested-With")
      res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS")
      res.header("X-Powered-By", ' 3.2.1')
      res.header("Content-Type", "application/json;charset=utf-8")
      next()
})


const io = socketio.listen(server);

server.listen(3000,function() {
    console.log('server runing at 127.0.0.1:3000')
})

这里我使用的socke.io是2.0.4版本的，因为新版本的改了.listen这个方法导致我没法成功连接到服务端。

//定义一个对象保存当前在线的用户
var map = {}
io.on('connection',function(socket) {
    console.log('客户端有连接',socket.id)
    socket.on('disconnect', (data) => {
        console.log('客户端断开',data)
    })

    socket.on('login',data => {
      //登录时将用户添加进对象
      map[data.userid] = socket.id
      console.log(map)
    })
  
    socket.on('exit',data => {
        console.log('退出连接',data)
        //退出的时候将用户从对象中删除
        delete map[data]
        console.log(map)
    })
    socket.on('test', data => {
        var socketid = map[data.toid]
        //根据传过来的toid查找用户的sockets对象
        var tosocket = io.sockets.sockets[socketid]
        console.log(tosocket)
        console.log('用户id'+data.userid,'消息内容'+data.msg,'发送至'+data.toid)
        // 发送消息给指定人
        tosocket.emit('send',data)
    })
});

要实现发送消息给指定人就必须通过他的socketid去找到他的socket对象，找到他的对象后就可以实现只发送给他消息了，io.emit就是广播事件，会发送给所有连接服务的客户端，要实现离线消息的话应该先去判断接收人是否以及连接服务器，如果没链接服务器的话就将信息保存到数据库，等到客户端上线的时候再从数据库取信息发送给他（小白个人理解，懂的大佬还请多多指教）

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VueSocketIO from 'vue-socket.io'

Vue.use(new VueSocketIO({
	debug:true,  //是否开启debug模式
	connection:'ws://localhost:3000',//后端的地址
	options:{
		autoConnect:false  //设置是否自动连接
	}，
	vuex{}//不用vuex可以不加
}))


Vue.config.productionTip = false

new Vue({
  sockets: {
    connecting() {
      console.log('正在连接')
    },
    disconnect() {
      console.log("Socket 断开");
    },
    connect_failed() {
      cosnole.log('连接失败')
    },
    connect() {
      console.log('socket connected')
    }
  },
  router,
  store,
  render: h => h(App)
}).$mount('#app')

这是vue-cli搭建的项目的main.js文件
网上看了好多教程和视频都没法连接到后端，最后终于尝试出了这个方法可以成功连接

  sockets: {
    welcome(data){
      console.log("接收数据",data)
    },
    send(data){
      console.log(data)
      this.arr.push(data)
    },
  }，

接收后端发送的数据在sockets里面注册事件接收

 methods: {
    submit(){
      this.$socket.emit('test', {userid:this.userid,msg:this.val,toid:4});
    }
  }

发送给后端数据再methods里面定义函数然后用事件去触发就行了
触发后端接收的方法用的就是上面的this.$socket.emit(‘后端注册的方法名’，要传的数据)

module.exports = {
  lintOnSave: false,
  devServer: {
    open: false,
    port: 8080,
    https: false,
    hotOnly: false,
    //配置代理
    proxy: {
      '/socket.io': {
        target: 'http://localhost:3000', //代理的服务地址
        changeOrigin: true, 
        logLevel: 'debug'
      }
    },
  }
}

这是我的vue.config.js配置文件，配置跨域之类的

OK以上就是小白对vue-socket.io使用的一些理解，理解有什么问题还请大佬们指出，勿喷勿喷

标签：vue,群聊,log,私聊,io,console,data,socket
来源： https://blog.csdn.net/qq_43702343/article/details/114745001