我的后端使用的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)
})

vue socketio如何使用及跨域问题的更多相关文章

  1. 解决Django+Vue前后端分离的跨域问题及关闭csrf验证

      前后端分离难免要接触到跨域问题,跨域的相关知识请参:跨域问题,解决之道   在Django和Vue前后端分离的时候也会遇到跨域的问题,因为刚刚接触Django还不太了解,今天花了好长的时间,查阅了 ...

  2. nginx处理vue打包文件后的跨域问题

    起因 在vue文件打包后,项目脱离了vue配置的反向代理配置,还是会报跨域的错误,或者直接打不开本地文件, 但是此刻我们想打开打包后的文件,测试一下文件有没有错误,因为经常会存在开发阶段没有问题,打包 ...

  3. vue 开发和生产的跨域问题

    开发阶段 在开发环境与后端调试的时候难免会遇到跨域问题,在 vue 项目中常用的是 proxyTable,这个用起来很方便. 打开 config 文件夹下面的 index.js,找到 dev 开发模式 ...

  4. 从零开始学 Web 之 Vue.js(四)Vue的Ajax请求和跨域

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  5. Vue+webpack项目中实现跨域的http请求

    目前Vue项目中对json数据的请求一般使用两个插件vue-resource和axios, 但vue-resource已经不再维护, 而axios是官方推荐的且npm下载量已经170多万,github ...

  6. [vue] [axios] 设置代理实现跨域时的纠错

    # 第一次做前端工程 # 记一个今天犯傻调查的问题 -------------------------------------------------------------------------- ...

  7. VUE系列三:实现跨域请求(fetch/axios/proxytable)

    1. 在 config/index.js 配置文件中配置proxyTable 'use strict' // Template version: 1.3.1 // see http://vuejs-t ...

  8. vue配置二级目录&vue-axios跨域办法&谷歌浏览器设置跨域

    一.根据官方建议,dist打包的项目文件放在服务器根目录下,但是很多时候,我们并不能这样做,当涉及到二级目录设置多层深埋的时候,就需要在webpack配置文件里去设置一下了. 在webpack.con ...

  9. Nginx+Springboot+Vue 前后端分离 解决跨域问题

    1:前端vue 写完 打包 npm run build prod 2: 后端api 写完打包 springboot mvn package -Dmaven.test.skip=true 3: ngin ...

随机推荐

  1. wpf 定时器应用,在界面动态刷新时间

    DispatcherTimer = new DispatcherTimer(); Timer.Tick += Timer_Tick; Timer.Interval = TimeSpan.FromSec ...

  2. 《我是一只IT小小鸟》读书笔记 PB16110698 第四周(~3.29)

    <我是一只IT小小鸟>读书笔记 本周在邓老师的推荐下,我阅读了<我是一只IT小小鸟>,这本书由21位初入职场的IT人的传记组成,记录了他们成长道路上的酸甜苦辣.书中一段段鲜活生 ...

  3. 2019-8-31-PowerShell-通过-WMI-获取系统安装软件

    title author date CreateTime categories PowerShell 通过 WMI 获取系统安装软件 lindexi 2019-08-31 16:55:58 +0800 ...

  4. passwd的使用例子

    passwd 作为普通用户和超级权限用户都可以运行,但作为普通用户只能更改自己的用户密码,但前提是没有被root用户锁定:如果root用户运行passwd ,可以设置或修改任何用户的密码: passw ...

  5. 基于Swagger+SpringBoot快速构建javaweb项目

    章节导航 SpringBoot&Swagger简介 数据模型和接口定义 项目框架生成 业务逻辑实现 项目源码地址 github项目路径:https://github.com/Vikezhu/s ...

  6. 迅雷 API 接口说明文档 -调用迅雷自动下载

    我们可以利用迅雷提供的开放API接口来自动下载文件.详细的接口说明大家可以看下面的. 先要说明一下的就是 迅雷的API接口是用 .com 来调用的 首先就是脚本了,各种语言写法不同,我这里提供用vbs ...

  7. Box 'laravel/homestead' could not be found.

    vbox vagrant.box Homestead 都安裝好的情況下.在homestead目錄下,執行vagrant up出錯 Homestead\scripts\文件夹中,打开homestead. ...

  8. PAT甲级——A1071 Speech Patterns

    People often have a preference among synonyms of the same word. For example, some may prefer "t ...

  9. python数据类型初始1

    int: 1,2,3就是用于计算. bool:主要是用于判断,True,False str:用引号引起来的,'dsldgau','张三'.主要用于储存少量数据,进行操作 list(列表):[1,2,3 ...

  10. 用DataTable填充实体类List

    /// <summary> /// 用DataTable填充实体类List /// </summary> public static List<T> FillLis ...