node soket.io + express + vue-soket.io 之间实现通信

因为vue和node服务器之间是会使用不同的两个端口后端的soket.io不能靠自己就能实现前后端通信

vue中提供了一个vue-soket.io 和 proxy代理通过这两个就能实现连接到后端的soket.io

后端要导入 soket.io模块

vue中要导入 vue-soket.io

具体代码

前端

首先是在vue脚手架启动的项目中会有一个config文件夹

这个文件加下的index.js

在这个文件的module.exports 中dev当中添加

proxyTable: {"/socket.io": {target: "http://localhost:8848", // 后端服务器接口changeOrigin: true, logLevel: "debug"},"/sockjs-node": {target: "http://localhost:8848", // 后端服务器接口ws: false, changeOrigin: true}
},

然后是vue中的main.js

import VueSocketio from 'vue-socket.io';
import SocketIO from 'socket.io-client';Vue.use(new VueSocketio({connection: SocketIO('ws://localhost:8848/') //这理要跟是你在config中的后端地址 保证一致
}))

后端

const express = require("express");
const app = express();
var http = require("http").Server(app);
var io = require("socket.io")(http,{ cors: {origin:'*'} });app.all("*", function (req, res, next) {res.header("Access-Control-Allow-Origin", "http://localhost:8080"); // 这个端口是你前端vue项目的端口res.header("Access-Control-Allow-Credentials", "true");res.header("Access-Control-Allow-Headers", "Content-Type");res.header("Access-Control-Allow-Methods", "PUT, POST, GET, DELETE, OPTIONS");next();
});io.sockets.on("connection", function (socket) {console.log("a user connectioning"
})

上面的只是和soket相关的代码把他们粘贴到本来能运行的后端应该就行

这样前端服务器访问后端服务器就会打印 a user connectioning

node soket.io + express + vue-soket.io 之间实现通信相关推荐

vue/父子组件之间的通信
父子组件之间的通信父组件绑定数据在组件上子组件props属性接收父组件内的data属性中待传的数据data1 => <cpn :data2="data1">& ...
Vue中父子之间的通信
在学习vue中,往往会碰到父子组件之间的通信问题,用一张图来简单解释下父子之间如何通信由图可以知道父组件传递参数给子组件子组件通过props接收参数父子通信代码演示: <!DOCTYP ...
前端框架Vue：组件之间的通信、插槽的使用
Vue组件与插槽一.组件化开发思想组件化规范 Web Components 我们希望尽可能多的重用的代码自定义组件的方式不太容易(html,js ,css) 多次使用组件可能导致冲突二.组件注 ...
vue兄弟组件之间的通信的使用
一般是页面里面引入两个组件在components 里面注册 components:{//引入的组件名 } 两个组件之间要传值的话要共同引入一下js的一个文件 import eventBus from ...
vue父子组件之间的通信
在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使用,遇到业务逻辑操作时子组 ...
vue中子组件和子组件之间怎么通信_vue.js组件之间如何通信？
vue.js组件之间如何通信?下面本篇文章就来给大家介绍一下Vue.js组件间通信方式.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 平时在使用Vue框架的业务开发中,组件不仅仅要 ...
如何使用Vue，Phaser，Node，Express和Socket.IO构建多人桌面游戏模拟器
Putting together all of the pieces of a full stack JavaScript application can be a complex endeavor. ...
Vue全家桶+Socket.io+Express/Koa2打造网页版手机QQ
Vue全家桶+Socket.io+Express/Koa2打造的网页版手机QQ(web app),高仿手机QQ7.1.0版本.为了方便大家学习,现在IP定位接口和实时气温接口也开放了!接口请在源码中查 ...
vue.js+socket.io+express+mongodb打造在线聊天[一]
vue.js+socket.io+express+mongodb打造在线聊天在线地址观看 http://www.chenleiming.com/vuechat github地址 https://gi ...

node soket.io + express + vue-soket.io 之间实现通信

前端

后端

node soket.io + express + vue-soket.io 之间实现通信相关推荐

最新文章

热门文章