详解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实现漂亮便签样式
Mar 18 HTML / CSS
CSS3中的@keyframes关键帧动画的选择器绑定
Jun 13 HTML / CSS
10分钟入门CSS3 Animation
Dec 25 HTML / CSS
css3中flex布局宽度不生效的解决
Dec 09 HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
Jul 17 HTML / CSS
html5 Canvas绘制线条 closePath()实例代码
May 10 HTML / CSS
HTML5 新旧语法标记对我们有什么好处
Dec 13 HTML / CSS
HTML5和以前HTML4的区别整理
Oct 20 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
Jun 16 HTML / CSS
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
Mar 21 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
Oct 22 HTML / CSS
使用CSS实现按钮边缘跑马灯动画
May 07 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
第十节--抽象方法和抽象类
2006/11/16 PHP
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
使用PHP处理数据库数据如何将数据返回客户端并显示当前状态
2016/02/16 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
js中将字符串转换成json的三种方式
2011/01/12 Javascript
jQuery.extend 函数详解
2012/02/03 Javascript
可自定义速度的js图片无缝滚动示例分享
2014/01/20 Javascript
jquery提交form表单时禁止重复提交的方法
2014/02/13 Javascript
jQuery $.each遍历对象、数组用法实例
2015/04/16 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
浅谈webpack4 图片处理汇总
2018/09/12 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
2019/02/12 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
vue项目中openlayers绘制行政区划
2020/12/24 Vue.js
用javascript实现倒计时效果
2021/02/09 Javascript
举例讲解Python设计模式编程的代理模式与抽象工厂模式
2016/01/16 Python
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
selenium切换标签页解决get超时问题的完整代码
2020/08/30 Python
顶级宝石首饰网络零售商:Angara
2016/10/25 全球购物
如何写一个Java类既可以用作applet也可以用作java应用
2016/01/18 面试题
银行自荐信范文
2013/10/07 职场文书
商场消防管理制度
2014/01/12 职场文书
大学生简短的自我评价分享
2014/02/20 职场文书
服装店营销方案
2014/03/10 职场文书
保护环境建议书300字
2014/05/13 职场文书
圣诞节开幕词
2015/01/29 职场文书
会计试用期自我评价
2015/03/10 职场文书
python字符串常规操作大全
2021/05/02 Python
MySQL 重命名表的操作方法及注意事项
2021/05/21 MySQL
浅谈Python numpy创建空数组的问题
2021/05/25 Python
vue中的可拖拽宽度div的实现示例
2022/04/08 Vue.js