express使用socketIO，前后端跨域

1.前端實現socketIO跨域：

(1)vueconfig.js配置

const webpack = require("webpack");
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'assets': "@/assets", //靜態資源文件夾
        // 'common': "@/common", //工具包文件夾
        'components': '@/components', //組件文件夾
        'network': '@/network', //網絡請求文件夾
        'views': '@/views', //視圖文件夾
        'util': '@/util' //工具類文件夾
      }
    },
    //支持jquery
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "windows.jQuery": "jquery"
      })
    ]
  },
  //    // 配置跨域
  devServer: {
    //設置代理
    proxy: {

       '/socket.io': {
         target: 'http://localhost:3000',
         ws: true,
         changeOrigin: true
       }
    },
    disableHostCheck: true
  }
 
}

(2)新建socket.js

import io  from "socket.io-client";//socket
const socket = io('/');//此處本來根據跨域應該為const socket = io('/socket.io'),但是socketio的請求地址默認自帶socket.io，所以此處只要傳入'/'
Vue.use(socket);

2.express后端實現socketIo跨域

（1）首先封裝mysocket.js,先新建mysocket.js

var socket = {}
var socket_io = require('socket.io');
function getSocket(server){

  var io = require('socket.io')(server,{ cors: true });
   // var io = socket_io.listen(server);//監聽傳入的server
   
     // 10.1connection監聽單個連接.
   io.on('connection',function(socket){
    console.log("**************************************");
     console.log("我來了，寶貝");
     console.log("id為:"+socket.id+"的用戶成功建立連接！");
     io.emit('this', { will: 'be received by everyone'})
     socket.on('send message',(data)=>{  
      console.log("接收到用戶:"+socket.id+"的一條消息,消息實體對象信息為:",data)  
      // 通過new message事件給對應的socketID發送數據 
      console.log("此消息發送給socketID：",data.toSocketID) 
      socket.to(data.toSocketID).emit('new message',data);  
      });   
  /****************************************************************************** */
     //10.2監聽進入聊天模塊
     socket.on('enterChat',async()=>{
       console.log("該用戶上線")
     })

  /****************************************************************************** */
     //10.3監聽已讀，已讀則把已讀標簽設置為true
     socket.on("hasRead",async(data)=>{
        
    })

  /****************************************************************************** */   
    // 10.4監聽斷開
    socket.on('disconnect',async(reason)=>{
      console.log("id為"+socket.id+"的用戶端口斷開……斷開原因："+reason);
    })
  });
   console.log("啟動socket...")
 }

socket.getSocket = getSocket;
//導出socket
module.exports = socket

(2)http協議跨域：在app.js引入

let express = require("express")
let app = express()
var port = ('3000');
app.set('port', port);

var http = require('http');
// 套接字模塊
//創建HTTP server
var server = http.createServer(app);
// // 導入socket的封裝方法
var socket = require("./weteach_routes/mySocket")
socket.getSocket(server)；//使用http協議建立socket

//此處變成http listen
server.listen(port);
// 導出
module.exports = app;

（3）https協議跨域，在app.js引入

let express = require("express")
var https=require('https');
var fs=require('fs');
var privateKey=fs.readFileSync('./2_humianyuan.cn.key'); //此處是你的ssl證書文件
var certificate=fs.readFileSync('./1_humianyuan.cn_bundle.crt');// 此處是你的ssl證書文件
var credentials= {key:privateKey,cert:certificate};
let app = express()
var httpsPort = "3000"
var httpsServer = https.createServer(credentials,app);//創建https套接字
httpsServer.listen(httpsPort,'0.0.0.0');

// // 導入socket的封裝方法
var socket = require("./weteach_routes/mySocket")
socket.getSocket(httpsServer)；//使用https協議建立socket
// 導出
module.exports = app;