websocket -js浏览器端连接

最新推荐文章于 2024-05-03 10:35:21 发布

itmacy

最新推荐文章于 2024-05-03 10:35:21 发布

阅读量589

点赞数

分类专栏： js 文章标签： websocket javascript

本文链接：https://blog.csdn.net/itmacy/article/details/131109165

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在项目开发中，除了前端使用http主动发请求，获取后端数据外，还可以使用websocket，来支持后端主动给前端推送数据，从而减少前端不断轮询，js浏览器端websocket连接的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>

  initWebSocket()

  function  initWebSocket() {
    let websocket = null
    if ('WebSocket' in window) {
      const url = 'ws://132.122.233.63:8800/example'
      console.log('ws-url:', url)
      websocket = new WebSocket(url)
      websocket.onopen = (event) => {
        console.log("建立连接:", event)
        websocket.send('hello')
      }
      websocket.onclose = (event) => {
        console.log('连接关闭:', event)
      }
      //建立通信后，监听到后端的数据传递
      websocket.onmessage = (event) => {
          // console.log('接收数据', event)
        let data = JSON.parse(event.data)
        console.log('接收数据', data)
        // 业务处理....
      }
      websocket.onerror = () => {
        alert("websocket通信发生错误！");
        // initWebSocket()
      }
      window.onbeforeunload = function(e) {
        websocket.close()
      }
    } else {
      alert("该浏览器不支持websocket！")
    }
  }
</script>
</body>
</html>

itmacy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
websocket -js浏览器端连接

/ console.log('接收数据', event)"该浏览器不支持websocket！//建立通信后，监听到后端的数据传递。"websocket通信发生错误！// 业务处理....
复制链接

扫一扫