详解WebSocket跨域问题解决


Posted in HTML / CSS onAugust 06, 2018

WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信,同时允许跨域通讯,是server push技术的一种很好的实现。我们使用Socket.io,它很好地封装了webSocket接口,提供了更简单、灵活的接口,也对不支持webSocket的浏览器提供了向下兼容。

项目中遇到javascript跨域问题,父页面和子页面要通信,并且父子页面跨域,怎么办?

项目中要保证父子页面通信是点对点,需要在服务端建立对父子页面WebSocket的对应关系,即父页面发的消息只被子页面收到,子页面的消息也只被父页面收到我们做了以下工作,严格保证了

WebSocket通信是点对点:

一是建立WebSocket链接的URL加上时间戳保证通信会话是唯一的;

二是在服务端保证父子页面WebSocket一一对应关系。父子页面的WebSocket在Open时都会向服务端发出消息进行注册,建立Senssion之间的对应关系。然后父子页面就可通过双方约束的通信协议进行通信了。

这里我们写个demo:

var p = document.getElementsByTagName(‘p’)[0];

var io = io.connect(‘http://127.0.0.1:3001’);

io.on(‘data’,function(data){

alert(‘2S后改变数据’);

p.innerHTML = data

});

服务器端

var io = require(‘socket.io’)(server);

io.on(‘connection’,function(client){

client.emit(‘data’,’hello WebSocket from 3001.’);

});

今天就说到这里,希望对大家有所帮助,同时大家如果不想太花时间去做WebSocket这块,可以尝试使用三方WebSocket,类似GoEasy 极光之类的。

这里推荐GoEasy,简单易用 www.goeasy.io 还是免费的,可以尝试一下。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
一款纯css3实现的竖形二级导航的实例教程
Dec 11 HTML / CSS
CSS3实现多重边框的方法总结
May 31 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 HTML / CSS
CSS3中媒体查询结合rem布局适配手机屏幕
Jun 10 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
Nov 22 HTML / CSS
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
Jan 09 HTML / CSS
HTML5实现动画效果的方式汇总
Feb 29 HTML / CSS
HTML5利用约束验证API来检查表单的输入数据的代码实例
Dec 20 HTML / CSS
html5页面结构_动力节点Java学院整理
Jul 10 HTML / CSS
recorder.js 基于Html5录音功能的实现
May 26 HTML / CSS
CSS实现切角+边框+投影+内容背景色渐变效果
Nov 01 HTML / CSS
HTML静态页面获取url参数和UserAgent的实现
Aug 05 HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 #HTML / CSS
HTML5拖拽功能实现的拼图游戏
Jul 31 #HTML / CSS
Html5页面二次分享的实现
Jul 30 #HTML / CSS
利用Storage Event实现页面间通信的示例代码
Jul 26 #HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
Jul 24 #HTML / CSS
htnl5利用svg页面高斯模糊的方法
Jul 20 #HTML / CSS
html5 input输入实时检测以及延时优化
Jul 18 #HTML / CSS
You might like
PHP访问数据库集群的方法小结
2016/03/14 PHP
php版银联支付接口开发简明教程
2016/10/14 PHP
tp5(thinkPHP5框架)使用DB实现批量删除功能示例
2019/05/28 PHP
安装docker和docker-compose实例详解
2019/07/30 PHP
javascript Prototype 对象扩展
2009/05/15 Javascript
javascript 按回车键相应按钮提交事件
2009/11/02 Javascript
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
2017/01/14 Javascript
JavaScript手风琴页面制作
2017/05/17 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
ES6解构赋值的功能与用途实例分析
2017/10/31 Javascript
加载 vue 远程代码的组件实例详解
2017/11/20 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
js实现盒子移动动画效果
2020/08/09 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
微信小程序视频弹幕发送功能的实现
2020/12/28 Javascript
python解析中国天气网的天气数据
2014/03/21 Python
在Linux上安装Python的Flask框架和创建第一个app实例的教程
2015/03/30 Python
简洁的十分钟Python入门教程
2015/04/03 Python
高效测试用例组织算法pairwise之Python实现方法
2017/07/19 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
Python如何读取、写入JSON数据
2020/07/28 Python
阿玛尼意大利官网:Armani意大利
2018/10/30 全球购物
深圳-东方伟业笔试部分
2015/02/11 面试题
2014植树节活动总结
2014/03/11 职场文书
医学专业毕业生推荐信
2014/07/12 职场文书
2014年重阳节敬老活动方案
2014/09/16 职场文书
离婚协议书范文
2015/01/26 职场文书