详解WebSocket跨域问题解决-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

这篇文章主要介绍了详解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视频教程！

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » 详解WebSocket跨域问题解决

详解WebSocket跨域问题解决

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论