最近有些网友说自己遇到问题不知道怎么解决, 特别是有些自学 web 前端的同学, 今天小猿圈 Web 前端讲师就给大家简单的讲讲 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 极光之类的.
上述就是小猿圈 Web 前端讲师为大家讲解前 WebSocket 跨域问题解决, 希望你能在自学 Web 前端中找到自己学习方法以及真正有用的学习网站, 如果你没有可以到小猿圈这里 Web 前端自学2群: 738735873, 这里不仅有专业的学习视频还有老师指导你学习帮助你进步, 希望你在不断进步中加快成长.
来源: http://www.jianshu.com/p/7c4e09737032