猿创征文 | 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连接

<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：可以使用高德地图拾取器来查询经度和纬度对应的地点。