socket.io跨域踩坑

一、koa结合socket.io

后端代码：

// 引入依赖
const koa = require("koa");
// 初始化koa
const app = new koa();
// 开启 http
var server = require("http").createServer(app.callback());
// 初始化 socket
const io = require("socket.io")(server, { cors: true });
// 监听
io.on("connection", (socket) => {console.log("有人链接");//接收数据socket.on('send', function (data) {console.log(data);// 发送数据socket.emit('resend', {msg: `你好${data.msg}`,code: 200});});
});
server.listen(3000);

前端代码：

<template><div class="hello"><input type="text" v-model="msg"><button @click="sendMsg">发送</button></div>
</template><script>
import io from 'socket.io-client'
export default {name: 'HelloWorld',data () {return {msg: 'Welcome to Your Vue.js App'}},mounted () {const socket = io('ws://localhost:3000')this.socket = socketwindow.socket = socketsocket.on('connect', function () {console.log('连接建立成功了！')})socket.on('disconnect', function () {console.log('断开连接了')})socket.on('resend', function (data) {console.log(data)})},methods: {sendMsg () {// 发送信息给服务端this.socket.emit('send', {msg: this.msg})}}
}
</script>
<style scoped></style>

二、express 结合 socket.io

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http, { cors: true });app.get('/', function(req, res){res.send('<h1>你好web秀</h1>');
});io.on('connection',function(socket) {console.log("有人链接");//接收数据socket.on('send', function (data) {console.log(data);// 发送数据socket.emit('resend', {msg: `你好${data.msg}`,code: 200});});
});http.listen(3000, function(){console.log('listening on *:3000');
});

前端代码：

<template><div class="hello"><input type="text" v-model="msg"><button @click="sendMsg">发送</button></div>
</template><script>
import io from 'socket.io-client'
export default {name: 'HelloWorld',data () {return {msg: 'Welcome to Your Vue.js App'}},mounted () {const socket = io('ws://localhost:3000')this.socket = socketwindow.socket = socketsocket.on('connect', function () {console.log('连接建立成功了！')})socket.on('disconnect', function () {console.log('断开连接了')})socket.on('resend', function (data) {console.log(data)})},methods: {sendMsg () {// 发送信息给服务端this.socket.emit('send', {msg: this.msg})}}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

注意：
如果出现跨域报错，可以参考以下解决方案：

重装socket.io-client

npm i socket.io-client --save

在vue中使用

socket.io跨域踩坑相关推荐

vue3下的uniapp跨域踩坑
uniapp vue3 H5跨域踩坑开发移动端H5的时候由于后端接口没有做跨域处理,因此需要做下服务器代理,于是百度搜索了uniapp下h5的跨域配置在manifest下的h5配置proxy,大概 ...
html2canvas跨域踩坑日常
这两天接到公司的指令做海报图分享然后尝试使用html2canvas+uview+uniapp进行编写踩坑如下 html2canvas跨域问题我司使用的是oss云存储,起初发生跨域以为是本地原因导 ...
uc浏览器请求被拦截报跨域踩坑记录
记录下开发时uc浏览器请求被拦截时遇到的问题请求在uc浏览器出现跨域问题 app使用uniapp开发,使用plus.runtime.launchApplication来打开并跳转指定页面,并在Xco ...
【vue axios 跨域】cookie、origin等一步步递进的跨域踩坑已解决
前后端对接必出bug,最近连续对接了两个项目,对解决跨域有点感觉了,跟大家分享一下经验,都是血的教训- 两个项目都是Springboot+Vue(axios网络请求).本人主要负责前端,所以前端会分享 ...
iframe子页面ajax报错,iframe跨域踩坑
前言工做中,有些系统是利用的iframe.有一次忽然遇到了一个使人费解的跨域报错,没有发请求,却报了"Error:Blocked a frame with origin...from ac ...
vue-socket.io跨域问题的解决方法
vue-socket.io跨域问题的解决方法参考文章: (1)vue-socket.io跨域问题的解决方法 (2)https://www.cnblogs.com/zhengze/p/12294916 ...
Elasticserch 5.6到Elasticsearch7.11跨版本升级踩坑记录
Elasticserch 5.6到Elasticsearch7.11跨版本升级踩坑记录 1.背景公司老的业务使用的是Elasticsearch5.6版本,使用的客户端是TransportClient ...
vue2.0下axios实现跨域踩的坑
按踩坑顺序叙述.本人对http了解太少,所以坑踩得较多. 1.开始进行跨域时,知道vue2.0官方推荐axios进行ajax请求,大致看一下https://www.npmjs.com/package/ ...
Ajax请求，跨域小坑
今天在上班的时候,被坐在旁边项目经理叫过去问了一个Ajax请求跨域的问题,一开始没理解清楚也还有对这个没有理解的透,后面被打击的要死. 当时的需求是需要测试一个已发布的api接口,需要在本地写测试程序 ...

socket.io跨域踩坑

一、koa结合socket.io

socket.io跨域踩坑相关推荐

最新文章

热门文章