html通过WebSocket获取虎牙弹幕并展示

suqiqi.

已于 2022-03-04 14:53:10 修改

阅读量1.6k

点赞数 2

分类专栏：前端文章标签： javascript websocket 开发语言 html 前端

于 2022-03-04 14:45:01 首次发布

本文链接：https://blog.csdn.net/qq_45981967/article/details/123276510

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

WebSocket获取虎牙弹幕并展示

效果图

效果图:

JWT 加密

参考使用 JavaScript 实现 JWT 鉴权:
通过 BootCDN 引入加密库 crypto-js 与 jsrsasign

<script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.1.1/crypto-js.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jsrsasign/10.5.8/ext/base64-min.js"></script>

通过 BootCDN 引入加密库 crypto-js 与 jsrsasign

//  base64二次加密
function base64UrlEncode(str) {
  var encodedSource = CryptoJS.enc.Base64.stringify(str)
  var reg = new RegExp('/', 'g')
  encodedSource = encodedSource
    .replace(/=+$/, '')
    .replace(/\+/g, '-')
    .replace(reg, '_')
  return encodedSource
}
/**
 * @description: 获取wss地址
 * @param roomId 虎牙房间号
 * @param appId 虎牙开发者appId
 * @param secret 虎牙开发者secret
 * @param expSeconds 签名过期时间
 */
function getWss(roomId, appId, secret, expSeconds) {
  var header = JSON.stringify({
    alg: 'HS256',
    typ: 'JWT',
  })
  var payload = JSON.stringify({
    iat: parseInt(new Date().getTime() / 1000),
    exp: parseInt(new Date().getTime() / 1000) + expSeconds,
    roomId: roomId,
    appId: appId,
  })

  var before_sign =
    base64UrlEncode(CryptoJS.enc.Utf8.parse(header)) +
    '.' +
    base64UrlEncode(CryptoJS.enc.Utf8.parse(payload))
  var signature = CryptoJS.HmacSHA256(before_sign, secret)
  signature = base64UrlEncode(signature)
  var final_sign = before_sign + '.' + signature
  var wss =
    'ws://ws-apiext.huya.com/index.html?do=comm&roomId=' +
    roomId +
    '&appId=' +
    appId +
    '&iat=' +
    parseInt(new Date().getTime() / 1000) +
    '&sToken=' +
    final_sign
  return wss
}

通过 WebSocket 获取弹幕内容

/**
 * @description: 获取socket内容
 * @param {type}
 */
function getSocketContent(wss) {
  // 弹幕数据
  let arry = []
  let arryItem = {
    name: '',
    content: '',
  }
  var socket = new WebSocket(wss)
  socket.onopen = function (event) {
    //发送subscribeNotice command
    socket.send(
      '{"command":"subscribeNotice","data":["getMessageNotice","getVipEnterBannerNotice","getSendItemNotice","getOnTVAwardNotice", "getOpenNobleNotice", "getOpenGuardianNotice", "getUserMutedNotice"],"reqId":"123456789"}'
    )
    //设置定时器以文本数据发送ping，保持与服务器的心跳
    setInterval(function () {
      socket.send('ping')
      // 渲染数据
      arry.forEach((item) => {
        console.log(item)
      })
    }, 15000)
  }
  socket.onmessage = function (event) {
    var json = JSON.parse(event.data)
    if (json.statusCode == 200) {
      //TODO处理数据json.data
      if (json.notice == 'getMessageNotice') {
        document.getElementById('con').innerHTML += htmlCon(
          json.data.sendNick,
          json.data.content
        )
        // div数量大于10条，删除第一条
        if (document.getElementById('con').children.length > 20) {
          document.getElementById('con').children[0].remove()
        }
      }
    }
  }
}

html 模板

随意写了一下样式做美化

/**
 * @description: html模板内容
 * @param {type}
 */
function htmlCon(nickName, content) {
  var html = `
        <div class="content">
          <div class="name">${nickName} :</div>
          <div style="width: 1em;"></div>
          <div class="txt">${content}</div>
        </div>
        `
  return html
}

获取 appId 与 secret

登录虎牙开发者平台获取 appId 与 secret

完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .content {
        display: flex;
      }
      .name {
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="con">
      <div class="content">
        <div class="name">用户名：</div>
        <div style="width: 0.2em"></div>
        <div class="txt">弹幕内容</div>
      </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.1.1/crypto-js.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jsrsasign/10.5.8/ext/base64-min.js"></script>
    <script type="text/javascript" charset="utf-8">
      //  base64二次加密
      function base64UrlEncode(str) {
        var encodedSource = CryptoJS.enc.Base64.stringify(str)
        var reg = new RegExp('/', 'g')
        encodedSource = encodedSource
          .replace(/=+$/, '')
          .replace(/\+/g, '-')
          .replace(reg, '_')
        return encodedSource
      }
      /**
       * @description: 获取wss地址
       * @param roomId 虎牙房间号
       * @param appId 虎牙开发者appId
       * @param secret 虎牙开发者secret
       * @param expSeconds 签名过期时间
       */
      function getWss(roomId, appId, secret, expSeconds) {
        var header = JSON.stringify({
          alg: 'HS256',
          typ: 'JWT',
        })
        var payload = JSON.stringify({
          iat: parseInt(new Date().getTime() / 1000),
          exp: parseInt(new Date().getTime() / 1000) + expSeconds,
          roomId: roomId,
          appId: appId,
        })

        var before_sign =
          base64UrlEncode(CryptoJS.enc.Utf8.parse(header)) +
          '.' +
          base64UrlEncode(CryptoJS.enc.Utf8.parse(payload))
        var signature = CryptoJS.HmacSHA256(before_sign, secret)
        signature = base64UrlEncode(signature)
        var final_sign = before_sign + '.' + signature
        var wss =
          'ws://ws-apiext.huya.com/index.html?do=comm&roomId=' +
          roomId +
          '&appId=' +
          appId +
          '&iat=' +
          parseInt(new Date().getTime() / 1000) +
          '&sToken=' +
          final_sign
        return wss
      }
      /**
       * @description: 获取socket内容
       * @param {type}
       */
      function getSocketContent(wss) {
        // 弹幕数据
        let arry = []
        let arryItem = {
          name: '',
          content: '',
        }
        var socket = new WebSocket(wss)
        socket.onopen = function (event) {
          //发送subscribeNotice command
          socket.send(
            '{"command":"subscribeNotice","data":["getMessageNotice","getVipEnterBannerNotice","getSendItemNotice","getOnTVAwardNotice", "getOpenNobleNotice", "getOpenGuardianNotice", "getUserMutedNotice"],"reqId":"123456789"}'
          )
          //设置定时器以文本数据发送ping，保持与服务器的心跳
          setInterval(function () {
            socket.send('ping')
            // 渲染数据
            arry.forEach((item) => {
              console.log(item)
            })
          }, 15000)
        }
        socket.onmessage = function (event) {
          var json = JSON.parse(event.data)
          if (json.statusCode == 200) {
            //TODO处理数据json.data
            if (json.notice == 'getMessageNotice') {
              document.getElementById('con').innerHTML += htmlCon(
                json.data.sendNick,
                json.data.content
              )
              // div数量大于10条，删除第一条
              if (document.getElementById('con').children.length > 20) {
                document.getElementById('con').children[0].remove()
              }
            }
          }
        }
      }
      /**
       * @description: html模板内容
       * @param {type}
       */
      function htmlCon(nickName, content) {
        var html = `
        <div class="content">
          <div class="name">${nickName} :</div>
          <div style="width: 1em;"></div>
          <div class="txt">${content}</div>
        </div>
        `
        return html
      }

      let wss = getWss(
        ****,
        ***************,
        ***************,
        600
      )
      // 调用方法
      getSocketContent(wss)
    </script>
  </body>
</html>