socket--vue-socket.io前端-express服务端

2,643 阅读1分钟

前端代码

进去项目就连接 没有异步逻辑处理后连接(地址固定的 ,不用登陆) main.js

import VueSocketIO from 'vue-socket.io';
    connetFun();
    function connetFun(){
        Vue.use(new VueSocketIO({
          //研发环境会打印socket初始化过程+socket中定义的事件
          debug: true,
          //我们的鉴权是拼接在query的 这个根据自己项目的实际情况来
          connection: `http://192.168.70.41:3009?${query}`,
         
          options:{
            path:{}, //不传的话会自动在路径加上/socket.io/
            <!--{ path: "/my-app/" } -->//有路径写法
          },
          reconnect:true,//掉线后自动重连
          options: {
              autoConnect: true//自动连接
          }
      }));
    }
  new Vue({
    el: '#app',
    router,
    store,
    template: '<App />',
    components: { App },
  });

地址不固定/登录后/有参数需要异步获取 后再连接的 main.js

socket事件拿不到,调用事件报错

方法一: vue实例创建 在VueSocketIO创建实例之后,如果有问题 ,页面就加载不出来了

connetFun();
function connetFun(){
    Vue.use(new VueSocketIO({
      debug: true,
      connection: `http://192.168.70.41:3009?${query}`,//本地
      options:{
        path:{}
      },
      reconnect:true,
      options: {
          autoConnect: true
      }
  }));
  new Vue({
    el: '#app',
    router,
    store,
    template: '<App />',
    components: { App },
    beforeCreate () {
      Vue.prototype.bus = this
    }
  });
}
 

方法二:结合connect事件+store+路由守卫实现拦截

代码还木有

xxx.vue 监听事件 发送指令 监听事件 收指令

    sockets: {
        connect: function() {
            this.$socket.emit('join');
            this.setConnectSocket(true)
            console.log('connect')
        },
        disconnect: function () {
            this.setConnectSocket(false);
            console.log('disconnect')
        },
        reconnect:function(){
            console.log('用户重新连接')
        },
        error: function () {
        },
        demand: function () {
        },
        push: function () {
        },
        message:function (data) {//监听消息变化
            console.log('message')
            this.setMessageInfo(data)
        },
        join:function (data) {
            this.$message({
                message: '有新用户登录!',
                type: 'success'
            });
        },
        leave:function (data) {
            this.$message({
                message: '有用户离开!',
                type: 'error'
            });
        },
    },

发送指令

this.$socket.emit('message','哈哈哈哈');

服务端 express

//引入程序包
var express = require('express')
  , path = require('path')
  , app = express()
  , server = require('http').createServer(app)
  , io = require('socket.io').listen(server);

//设置日志级别
    io.set('log level', 1); 
    var randomNum = 1;
    //WebSocket连接监听
    io.on('connection', function (socket) {
      socket.emit('open');//通知客户端已连接
      // 打印握手信息
      // console.log(socket.handshake);
      // 构造客户端对象
      socket.on('join',function(msg){
        // socket.emit('join');
        socket.broadcast.emit('join');
      });
      // 对message事件的监听
      socket.on('message',function(msg){
        // 返回消息(可以省略)
        // socket.emit('message',msg);//所有人都可以收到
        // 广播向其他用户发消息
        socket.broadcast.emit('message',msg);//除了自己以外的可以收到
      });
      socket.on('reconnect_attempt',function(msg){
    });
  //监听出退事件
  socket.on('disconnect', function () {  
    var obj = {
      time:getTime(),
      color:client.color,
      author:'System',
      text:client.name,
      type:'disconnect'
    };
    // 广播用户已退出
    socket.broadcast.emit('leave');
  });
});

//express基本配置
app.configure(function(){
  app.set('port', process.env.PORT || 3009);
  app.set('views', __dirname + '/views');
  app.use(express.favicon());
  app.use(express.logger('dev'));
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(path.join(__dirname, 'public')));
});

app.configure('development', function(){
  app.use(express.errorHandler());
});

// 指定webscoket的客户端的html文件
app.get('/', function(req, res){
  res.sendfile('views/chat.html');
});

server.listen(app.get('port'), function(){
  console.log("Express server listening on port " + app.get('port'));
});

结语

在写的时候参考了此博客 www.cnblogs.com/dreamsqin/p…
原理比较清楚 我这边就比较简单了 记录下思路