融云直播聊天室的实现vue

最近公司要求做 视频直播功能 附带聊天室 今天就来记录一下
首先引进所需要的 Js
融云技术文档 https://www.rongcloud.cn/docs…

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://sdk-release.qnsdk.com/qiniu-web-player-1.2.0.js"></script>
<script src="https://cdn.ronghub.com/RongIMLib-2.5.0.min.js"></script>
<script src="https://p6.suibianyuming.com.cn/chatRoom.js"></script>
由于融云的封装使用的是 jquery 所以这里也用到了 jquery, 原本使用单 html 写的，但是因为跨域问题，所以选择了 vue，给大家看下接口数据

 融云直播所需要的参数  先获取接口 videoinfo 的 id 根据 ID、获取 rytokenInfo 的值 

// 从后端接口获取
      var appInfo = {
        appKey: '"" // 融云的 appkey  
        token:""   // 聊天室的 token
      };

      var chatRoomInfo = {
        chatRoomId: '',  // 融云聊天室的 id 我这边是已直播号为准。count: 0 // 显示之前评论的个数
      };

    接下来 复制粘贴即可 封装的方法在 chatRoom.js 里面

         var that = this
       RongChatRoom.init(appInfo, chatRoomInfo, {onSuccess: function(chatRoom) {console.log(chatRoom)
         // 注册自定义消息
         var propertys = ["title", "submitAPI", "questions"]; // 消息类中的属性名。registerMessage("QA", propertys);

         // 加入聊天室成功。console.log("加入聊天室成功");
         // console.log(chatRoom);
         that.chatRoom = chatRoom;  // 把 chatRoom 挂载到 this 上
         // 调用示例
       },
       onError: function(error) {alert("加入聊天室失败。");
         // 加入聊天室失败
       },
       onMessage: function(message) {console.log(message);
         that.updateDanmu(message.content.content); 这步必须有
       }
     });
     function registerMessage(type, propertys) {
       var messageName = type; // 消息名称。var objectName = "s:" + type; // 消息内置名称，请按照此格式命名 *:*。var mesasgeTag = new RongIMLib.MessageTag(true, true); //true true 保存且计数，false false 不保存不计数。RongIMClient.registerMessageType(
         messageName,
         objectName,
         mesasgeTag,
         propertys
       );
     }
     // updateDanmu
     updateDanmu(message) {
         var that = this;
         // 弹幕高度随机
         var firstComment = {  // 传送的参数
           name: that.chatRoom.id,
           content: message
         };
        
     this.commentBox.push(firstComment); 往聊天室内输入内容
     this.txtInput = ""; // 值
     setTimeout(that.top(), 1000); // 输入完滚动条到最下面
   },

confirm 输入事件  复制粘贴即可 把 txtInput 值 改成你的值 确定发送 

 confirmInput() {  // 事件
      if (this.txtInput.trim() == "") {alert("输入内容");
        return;
      }
      var that = this;
      var chatRoom = this.chatRoom;
      var content = that.txtInput;
      chatRoom.sendMessage( // 向聊天室发送内容
        {"content": content},
        {onSuccess: function(message) {console.log("发送聊天室消息成功");
            that.updateDanmu(content);
          },
          onError: function(errorCode, message) {console.log("发送聊天室消息失败", errorCode);
          }
        }
      );
      // 聊天室信息
      this.chatRoom.getInfo(
        {
          order: RongIMLib.GetChatRoomType.REVERSE, // 排序方式。memberCount: 10 // 0 - 20
        },
        {onSuccess: function(chatRoomInfo) {console.log("获取聊天室信息成功");
            console.log(chatRoomInfo);
          },
          onError: function(error) {}}
      );
    },

git 网址 https://github.com/978744151/…

如果有不懂的。有小程序兴趣. 疑难. 可以加 QQ 一起交流 978744151