详解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 相关文章推荐
利用CSS的Sass预处理器(框架)来制作居中效果
Mar 10 HTML / CSS
IE下实现类似CSS3 text-shadow文字阴影的几种方法
May 11 HTML / CSS
CSS3的Border-radius轻松制作圆角
Dec 24 HTML / CSS
css3的transition效果和transfor效果示例介绍
Oct 30 HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
Jul 08 HTML / CSS
使用css3做0.5px的细线的示例代码
Jan 18 HTML / CSS
CSS3实现可翻转的hover效果
May 23 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
May 08 HTML / CSS
Html5移动端适配IphoneX等机型的方法
Jun 25 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
Sep 05 HTML / CSS
amazeui时间组件的实现示例
Aug 18 HTML / CSS
css实现文章分割线样式的多种方法总结
Apr 21 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 用checkbox一次性删除多条记录的方法
2010/02/23 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
jquery JSON的解析方式
2009/07/25 Javascript
offsetHeight在OnLoad中获取为0的现象
2013/07/22 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
深入剖析JavaScript中的函数currying柯里化
2016/04/29 Javascript
js处理层级数据结构的方法小结
2017/01/17 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
微信小程序wepy框架笔记小结
2018/08/08 Javascript
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
layui清除radio的选中状态实例
2019/11/14 Javascript
js通过循环多张图片实现动画效果
2019/12/19 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
Python 专题三 字符串的基础知识
2017/03/19 Python
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
Django框架静态文件使用/中间件/禁用ip功能实例详解
2019/07/22 Python
python3.6连接mysql数据库及增删改查操作详解
2020/02/10 Python
Pycharm内置终端及远程SSH工具的使用教程图文详解
2020/03/19 Python
css3 column实现卡片瀑布流布局的示例代码
2018/06/22 HTML / CSS
canvas实现圆形进度条动画的示例代码
2017/12/26 HTML / CSS
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
ORACLE十问
2015/04/20 面试题
音乐学专业求职信
2014/07/22 职场文书
毕业论文答辩开场白
2015/05/27 职场文书
汽车修理厂管理制度
2015/08/05 职场文书
详解Mysql和Oracle之间的误区
2021/05/18 MySQL
DSP接收机前端设想
2022/04/05 无线电
MySQL 原理与优化之Update 优化
2022/08/14 MySQL