vue socketio如何使用及跨域問題


我的后端使用的flask_socketio做服務端  前端使用的vue_socketio當客戶端

vue.config.js配置

module.exports = {
  outputDir: process.env.outputDir,
  assetsDir: 'static',
  publicPath: '/',
  devServer: {
    open: false,
    host: '0.0.0.0',
    port: 8001,
    https: false,
    hotOnly: false,
    //配置代理
    proxy: {
      //以'/api'開頭的接口會轉接到下面的target的ip
      '/api': {
        target: 'http://127.0.0.1:5000', // target host
        changeOrigin: true, // needed for virtual hosted sites
        ws: false, // proxy websockets
        pathRewrite: {
          //路徑重寫
          '^/api': '/api/', // rewrite path
        },
        logLevel: 'debug'
      },
      '/socket.io': {
        target: 'http://127.0.0.1:5000', // target host
        changeOrigin: true, // needed for virtual hosted sites
        logLevel: 'debug'
      }
    }
  }
}

在任意的.vue文件中建立連接

let socket = io({
        reconnection: true,
        forceNew: true,
        transports: ['websocket'],
})

socket.on('connect', function () {  //連接成功綁定的事件
        console.log('connect');
        socket.emit('my event', {data: 'I\'m connected!'});
});

socket.on('news', function (data) { //后台提供的事件名
        console.log('2222222222222')
        console.log(data)
})


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM