【9大跨域解决方案】websocket解决跨域的原理

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种方法(点击可跳转详情页面)

  • 8
    点赞
  • 44
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值