详解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 相关文章推荐
收集的7个CSS3代码生成工具
Apr 17 HTML / CSS
html5+css3之动画在webapp中的应用
Nov 21 HTML / CSS
CSS3打造磨砂玻璃背景效果
Sep 28 HTML / CSS
html+css3实现的登录界面
Dec 09 HTML / CSS
利用canvas实现图片下载功能来实现浏览器兼容问题
May 31 HTML / CSS
html5 canvas fillRect坐标和大小的问题解决方法
Mar 26 HTML / CSS
HTML5实现WebSocket协议原理浅析
Jul 07 HTML / CSS
浅谈h5自定义audio(问题及解决)
Aug 19 HTML / CSS
Html5踩坑记之mandMobile使用小记
Apr 02 HTML / CSS
CSS3 制作的悬停缩放特效
Apr 13 HTML / CSS
纯html+css实现奥运五环的示例代码
Aug 02 HTML / CSS
css实现左上角飘带效果的完整代码
Mar 18 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多线程下载远程多个文件
2013/06/25 PHP
PHP基于单例模式实现的mysql类
2016/01/09 PHP
UpdatePanel和Jquery冲突的解决方法
2013/04/01 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
js函数返回多个返回值的示例代码
2013/11/05 Javascript
node.js中的fs.lchownSync方法使用说明
2014/12/16 Javascript
nodejs实现HTTPS发起POST请求
2015/04/23 NodeJs
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
DOM 事件的深入浅出(二)
2016/12/05 Javascript
原生js实现可爱糖果数字时间特效
2016/12/30 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
详解vue 配合vue-resource调用接口获取数据
2017/06/22 Javascript
webpack打包js的方法
2018/03/12 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
js实现随机点名器精简版
2020/06/29 Javascript
vue在响应头response中获取自定义headers操作
2020/07/24 Javascript
[03:03]DOTA2 2017国际邀请赛开幕战队入场仪式
2017/08/09 DOTA
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
用Python编程实现语音控制电脑
2014/04/01 Python
Laravel框架表单验证格式化输出的方法
2019/09/25 Python
基于python判断目录或者文件代码实例
2019/11/29 Python
在pycharm中创建django项目的示例代码
2020/05/28 Python
Python中三维坐标空间绘制的实现
2020/09/22 Python
深入理解HTML的FormData对象
2016/05/17 HTML / CSS
美国老牌主机服务商:iPage
2016/07/22 全球购物
潘多拉意大利官方网上商城:网上选购PANDORA珠宝
2018/10/07 全球购物
绝对经典成功的大学生推荐信
2013/11/08 职场文书
服装公司总经理岗位职责
2013/11/30 职场文书
行政人事岗位职责
2014/03/17 职场文书
公司请假条格式
2014/04/11 职场文书
2014年节能工作总结
2014/12/18 职场文书
2015幼儿园新学期寄语
2015/02/27 职场文书
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript