融云直播聊天室的实现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