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

目录

1、websocket

❓什么是websocket?

✍️应用场景

如何建立websocket连接?

2、地理位置的获取


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连接

2、地理位置的获取

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

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

猿创征文 | H5API之websocket和地理位置的获取_第1张图片

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

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

你可能感兴趣的:(H5API,前端,websocket,ws协议,geolocation,前端,javascript)