我的后端使用的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. C 遍历目录及其子目录

    遍历某一目录,获取该目录下所有文件路径的数组 #include <iostream> #include <dirent.h> #include <vector> v ...

  2. mongodb 3.2 yaml 配置详解及范例

    mongodb3.x版本后就是要yaml语法格式的配置文件,下面是yaml配置文件格式如下:官方yaml配置文件选项参考:https://docs.mongodb.org/manual/ ... #c ...

  3. NOIP2018游记 & 退役记

    NOIP2018游记 & 退役记 我是一名来自湖北武汉华中师大一附中的高二\(OIer\),学习\(OI\)一年,今年去参加\(NOIP\),然后退役.这是一篇\(NOIP2018\)的游记, ...

  4. Apache服务器中运行CGI程序的方法,文中以Perl脚本作为示例

    关于apache与CGI在这里就不解释了. 1.apache下面以2.0.63为例介绍运行CGI程序的配置.(http://www.nklsyy.com) 2.下载Windows下的Perl解释器Ac ...

  5. 廖雪峰Java11多线程编程-3高级concurrent包-7Future

    JDK提供了ExecutorService接口表示线程池,可以通过submit提交一个任务. ExecutorService executor = Executors.newFixedThreadPo ...

  6. Android之FrameLayout帧布局

    1.简介 这个布局直接在屏幕上开辟出一块空白的区域,当我们往里面添加控件的时候,会默认把他们放到这块区域的左上角; 帧布局的大小由控件中最大的子控件决定,如果控件的大小一样大的话,那么同一时刻就只能看 ...

  7. jeecms v9开发资料

    开发文档 . 系统架构概述 本系统核心架构为 FreeMarker+hibernate+Spirng 的 mvc 分层架构. 1.1 分层架构模型 img 1.2 数据流转模型 (前端) img . ...

  8. 整合SSH框架最基本的例子

    ssh框架整合 一.思路 1.导包 struts2: \apps\struts2-blank\WEB-INF\lib\所有包 struts2-spring-plugin-2.3.28.jar hibe ...

  9. How to ping and test for a specific port from Linux or Unix command line

    Use telnet command The syntax is:telnet {host} {port}telnet www.cyberciti.biz 80telnet 192.168.2.254 ...

  10. springMVC dubbo注解无效,service层返回空指针

    出现空指针的原因是:spring mvc扫描的时候根本无法识别@Reference ,同一方面,dubbo的扫描也无法识别Spring @Controller ,所以两个扫描的顺序要排列好,  如果先 ...