标签：vue 群聊 log 私聊 io console data socket

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。