详解WebSocket跨域问题解决
程序员文章站
2023-11-12 09:27:22
这篇文章主要介绍了详解WebSocket跨域问题解决的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧... 18-08-06...
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 还是免费的,可以尝试一下。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: python双向链表实现实例代码
下一篇: Ai简单绘制一个蓝色暂停键app图标