本来我是直接使用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("id为"+socket.id+"成功建立连接！"); io.emit(‘this‘, { will: ‘be received by everyone‘}) socket.on(‘send message‘,(data)=>{ console.log("接收到前台传来的数据：",data) // 通过message事件给前端发送数据 socket.emit(‘message‘, { msg: `new message`, }); }); /****************************************************************************** */ //10.2监听进入聊天模块 socket.on(‘enterChat‘,async(data)=>{ console.log("用户进入：",data) }) /****************************************************************************** */ //10.3监听已读，已读则把已读标签设置为true socket.on("hasRead",async(data)=>{ }) /****************************************************************************** */ //10.4监听客户端发送的信息,监听用户上线，如果在线直接利用onlineChat封装数据，发送给前端 socket.on(‘client‘,async function(data){ }) /****************************************************************************** */ // 10.5监听断开 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;
测试结果：
前台：VueSocketIOExt+socket.io-client，后台socket.io的聊天环境搭载
原文：https://www.cnblogs.com/hmy-666/p/14723380.html