【9大跨域解决方案】websocket解决跨域的原理
websocket笔记webSocket本身不存在跨域问题，所以我们可以利用webSocket来进行非同源之间的通信。websocket如何实现跨域通信?原理：利用webSocket的API，可以直接new一个socket实例，然后通过open方法内send要传输到后台的值，也可以利用message方法接收后台传来的数据。后台是通过new WebSocket.Server({port:...
·
websocket笔记
webSocket本身不存在跨域问题，所以我们可以利用webSocket来进行非同源之间的通信。
websocket如何实现跨域通信?
- 原理：利用webSocket的API，可以直接new一个socket实例，然后通过open方法内send要传输到后台的值，也可以利用message方法接收后台传来的数据。后台是通过new WebSocket.Server({port:3000})实例，利用message接收数据，利用send向客户端发送数据。具体看以下代码：
- 代码：
- 本地域打开socket.html
- WebSocket是高级api，不兼容，但是可以使用socket.io这个库，这个库做了兼容处理
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!--
高级api 不兼容 但是有一个socket.io这个库，是兼容的(一般用这个)
-->
<script type="text/javascript">
let socket = new WebSocket("ws://localhost:3000");//ws协议是webSocket自己创造的
socket.onopen = function(){
socket.send("我叫俞华");
}
socket.onmessage = function(e){
console.log(e.data);//你好,我叫俞华！
}
</script>
</body>
</html>
- 起一个服务端
- 一般起的服务是http服务，但是websocket需要起ws服务，ws是webSocket自己定义的。
/*
要使用ws协议，那么就要装一个ws的包
*/
let express = require("express");
let app = express();
let WebSocket = require("ws");
let wss = new WebSocket.Server({port:3000});
wss.on("connection",function(ws){//先连接
ws.on("message",function(data){//用message来监听客户端发来的消息
console.log(data);//俞华
ws.send("你好,"+data+"！");
})
})
如何保证websocket的通信会话是唯一的？
- 建立WebSocket链接的url上加上时间戳。
实现跨域的9种方法(点击可跳转详情页面)
- jsonp
- cors
- postMessage
- document.domain
- window.name
- location.hash
- http-proxy 后续会有详细文章阐述
- nginx 后续会有详细版块阐述
- websocket
瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手
更多推荐
8
0- 0
已为社区贡献2条内容
所有评论(0)