前台：VueSocketIOExt+socket.io-client，后台socket.io的聊天环境搭载

一、前台

本来我是直接使用socket.io-client，但是不知道是我没有跨域还是什么原因，最开始的时候安装官方文档的做法，老是不能成功建立连接，所以我就再下载了一个VueSocketIOExt，它依赖于socket.io-client并扩展了socket.io-client。

所以前台需要做的如下：

1. 下载socket.io-client与VueSocketIOExt

npm install vue-socket.io-extended socket.io-client --save

2.在main.js或者单独建立一个js文件引入下面内容：

import Vue from 'vue'
import io  from "socket.io-client";//socket
import VueSocketIOExt from 'vue-socket.io-extended';
const socket = io('/');//此处为需要和后台建立链接的地址，前端一般要跨域处理 本来此处根据下面的跨域处理应该为onst socket = io('/socket.io')，但是我发现默认socket访问的地址就带有socket.io，所以此处我直接一根斜杆即可。这里随机应变
Vue.use(VueSocketIOExt, socket);

3.跨域处理。 新建vue.config.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: {
      "/api_hu66": {
        // 允许访问数据的计算机名称
        target: 'http://localhost:3000',
        ws: true, //启用webSocket
        changeOrigin: true, //开启代理跨域
        pathRewrite: {
          // 重写api地址
          '^/api_hu66': ""
        }
      },
      "/api_soTi": {
        // 允许访问数据的计算机名称
        // target: 'http://api.51aidian.com/api/cha.php',
        target: 'http://api.51aidian.com',
        ws: true, //启用webSocket
        changeOrigin: true, //开启代理跨域
        pathRewrite: {
          // 重写api地址
          '^/api_soTi': ""
        }
      },
      '/socket.io': {//此处为socket跨域
        target: 'http://localhost:3000',
        ws: true,
        changeOrigin: true
      },
      //  'sockjs-node': {
      //   target: 'http://localhost:3000',
      //   ws: false,
      //   changeOrigin: true
      //  },
    },
    disableHostCheck: true
  }
  //   css: {
  //     extract: true, // 是否使用css分离插件 ExtractTextPlugin
  //     sourceMap: false, // 开启 CSS source maps?
  //     loaderOptions: {
  //         scss: {
  //           prependData: `
  //           @import "@/assets/scss/my.scss";
  //         `
  //         }
  //     }, // css预设器配置项
  //     requireModuleExtension: false // 启用 CSS modules for all css / pre-processor files.
  // },
}

4.新建chat.vue进行测试，在created生命周期里面输入以下内容

 // 1.聊天套接字
      //告诉后台，用户进入聊天界面，此时后台会回传未读消息
                    this.$socket.client.emit('send message', {
                        msg: "用户进入chat",
                        users: localStorage.Login_user
                    });

二、后台：

1.下载

npm install socket_io --save

2.新建mySocket.js

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

  var io = require('socket.io')(server);
   // 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发送数据  
      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

3.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 listen
server.listen(port);
// app.listen(3000,()=>{console.log("服务器启动……")})
// 导出
module.exports = app;

测试结果：