• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 详解WebSocket跨域问题解决

详解WebSocket跨域问题解决

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含WebSocket,跨域,html5等相关知识,匿名希望在学习及工作中可以帮助到您
这篇文章主要介绍了详解WebSocket跨域问题解决的相关资料,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

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 极光之类的。

总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。更多相关教程请访问Html5视频教程!

相关推荐:

php公益培训视频教程

HTML5图文教程

HTML5在线手册

以上就是详解WebSocket跨域问题解决的详细内容,更多请关注微课江湖其它相关文章!

您可能想查找下面的文章:

  • 浅析HTML5的WebSocket与服务器推送事件
  • 带你认识HTML5中的WebSocket
  • HTML5实现WebSocket协议原理浅析
  • html5的websockets全双工通信详解学习示例
  • 利用html5的websocket实现websocket聊天室
  • html5-websocket基于远程方法调用的数据交互实现
  • HTML5-WebSocket实现聊天室示例
  • 详解WebSocket跨域问题解决
  • HTML5新增协议:WebSocket协议的实例
  • Websocket原理的深入理解

相关文章

  • 2018-12-03HTML5的地理定位如何使用
  • 2018-12-03HTML5 用动画的表现形式装载图像 _html5教程技巧
  • 2018-12-03HTML5-WebSocket实现多文件同时上传
  • 2018-12-03详细介绍WebSocket API HTML5规范翻译
  • 2018-12-03详解H5和HTML4的区别
  • 2018-12-03如何在一个月之内从零基础成为初级CSS前端开发工程师?
  • 2018-12-03H5 Canvas API中drawImage(图像进行缩放或裁剪)的使用实例
  • 2018-12-03HTML5的结构和语义(1):前言_html5教程技巧
  • 2017-08-06解析HTML5的存储功能和web SQL的相关操作方法
  • 2017-08-06HTML5 Canvas自定义圆角矩形与虚线示例代码

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Mac OS X 上学习HTML+JavaScript+CSS有哪些可以推荐的IDE?
    • canvas基础的学习
    • HTML5初级知识总结
    • html5 output标签是什么意思?html5 output标签的使用方法
    • 利用Html5实现文件异步上传功能代码实例
    • HTML5 对各个标签的定义与规定:meta
    • HTML5 Canvas 起步(1) - 基本概念
    • HTML5能干什么?详解html5的功能
    • H5你真的了解吗?(绝对干货)
    • html5 Canvas画图教程(5)—canvas里画曲线之arc方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有