我的后端使用的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. <Python基础>列表的基本操作

    s = 'abCDeFg aBcDea' s1 = s.split('D',3) #以s1列表为例 print(s1) #增 s1.append('foxabc') #返回值None,直接增到列表的最 ...

  2. 使用CEfSharp之旅(3)下载文件 弹出保存框 IDownloadHandler

    原文:使用CEfSharp之旅(3)下载文件 弹出保存框 IDownloadHandler 版权声明:本文为博主原创文章,未经博主允许不得转载.可点击关注博主 ,不明白的进群191065815 我的群 ...

  3. JS规则 我与你同在(逻辑与操作符)数学中的“b大于a,b小于c”是“a<b<c”,那么在JavaScript中可以用&&表示

    我与你同在(逻辑与操作符) 数学里面的"a>b",在JavaScript中还表示为a>b:数学中的"b大于a,b小于c"是"a<b& ...

  4. godaddy账号以及域名被盗找回经历以及网络信息安全的思考

    本案涉及到公司的一些机密信息,因此涉及到机密信息,我都将会用一些其他的代号进行替代.不影响读者理解本案.我会按照时间顺序讲述本案经过,是如何一步步找回godaddy账号的. 我供职的公司是一家网络科技 ...

  5. CodeForces-510D

    https://vjudge.net/problem/CodeForces-510D题目可以转化为花最小代价选一些数,然后这些数可以经过加减运算得到1或-1,不然1你就凑不出来,一旦凑出来1,其他的都 ...

  6. LoadRunner内部结构(1)

    LoadRunner内部结构(1) 根据http://www.wilsonmar.com/1loadrun.htm  翻译: LoadRunner内部结构 1,            被测系统是由驱动 ...

  7. 学习笔记css3

    边框 盒子圆角 border-radius:5px / 20%: border-radius:5px 4px 3px 2px; 左上,右上,右下,左下 盒子阴影 box-shadow:box-shad ...

  8. ThinkPHP可以支持直接使用字符串作为查询条件

    ThinkPHP可以支持直接使用字符串作为查询条件,但是大多数情况推荐使用数组或者对象来作为查询条件,因为会更加安全. 大理石平台哪家好 一.使用字符串作为查询条件 这是最传统的方式,但是安全性不高, ...

  9. springmvc jar包下载

    (1) springmvc jar包下载 提供地址 - qq_31307253的博客 - CSDN博客https://blog.csdn.net/qq_31307253/article/details ...

  10. iOS开发自定义转场动画

    1.转场动画 iOS7之后开发者可以自定义界面切换的转场动画,就是在模态弹出(present.dismiss),Navigation的(push.pop),TabBar的系统切换效果之外自定义切换动画 ...