0


猿创征文 | H5API之websocket和地理位置的获取

1、websocket

❓什么是websocket?

websocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议,即ws协议。它是客户端和服务器端进行通信的协议,它使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据,使用websocket可以在服务器与客户端之间建立一个非HTTP的双向连接,这个连接是实时的也是永久的,除非被手动关闭,否则服务器可以随时将消息推送到客户端,且它的连接需要服务器的支持

✍️应用场景

1、订单的物流信息:我们想要知道物流到哪里了,就需要与服务端进行实时通信以发送请求,获取响应。此时可以使用轮询,间歇调用执行请求:

setInterval(function(){
    ajax->  //发送ajax请求
    if(res.address){
      通知用户
    }
},1000)

2、推送消息:任务完成后服务器推送一下

📖如何建立websocket连接?

1、使用new WebSocket()创建一个websocket对象

2、使用onmessage事件接收服务器消息推送

3、使用onopen事件监听websocket和服务器连接成功的监听,同时可以用send()方法发送数据给服务器

4、使用close事件监听websocket和服务器连接关闭的监听(需要我们手动关闭连接才能看到)

5、使用close()方法手动关闭websocket连接

<script>
    // 1.创建一个websocket对象
    var scoket = new WebSocket('url地址')
    // 2.接收服务器消息推送
    scoket.onmessage = function(event){
      console.log(event.data);
    }
    // 3.监听websocket和服务器连接成功的监听
    scoket.onopen = function(){
      console.log('websocket和服务器连接成功');
      scoket.send('发送给服务器的数据')
    }
    // 4.监听websocket和服务器连接关闭的监听
    scoket.close = function(){
      console.log('websocket和服务器连接关闭');
    }
    // 5.手动关闭websocket连接
    setTimeout(function(){
      scoket.close()
    },3000)
</script>

2、地理位置的获取

html5中添加了获取地理位置的api:window.navigator.geolocation.getCurrentPosition。它也是百度地图或者高德地图通过浏览器定位的实现原理。

<script>
    window.navigator.geolocation.getCurrentPosition(function(position){
      console.log(position);
    })
</script>

🐾注意:我们需要先打开电脑的定位。

打印之后,我们可以获取到经度(longitude)和纬度(latitude)的值。

👉ps:可以使用高德地图拾取器来查询经度和纬度对应的地点。


本文转载自: https://blog.csdn.net/lq313131/article/details/126649011
版权归原作者 叶子yes 所有, 如有侵权,请联系我们删除。

“猿创征文 | H5API之websocket和地理位置的获取”的评论:

还没有评论