当前位置: 首页 > Web前端 > HTML5

融云直播聊天室(vue)的实现

时间:2023-04-05 23:12:27 HTML5

最近公司需要一个带聊天室的视频直播功能。今天先记录下需要的Js融云技术文档。https://www.rongcloud.cn/docs。..因为融云的打包使用了jquery,所以这里也使用了jquery。本来是用singlehtml写的,但是因为跨域的问题,所以选择了vue,融云直播需要的参数![此处插入图片描述](https://img-blog.csdnimg.cn/20190903233710504.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDQ==,2MTEzNA),ObtainFF_color_7,FFvarappInfofromthebackendinterface={appKey:'"",//融云appen的token";chatRoomInfo={chatRoomId:'',//融云聊天室id为直播号。count:0//显示之前的评论数};接下来将封装好的方法复制粘贴到chatRoom.js中//使用promise因为有一个接口需要在onsuccess之后调用returnnewPromise((reslove,reject)=>{RongChatRoom.init(appInfo,chatRoomInfo,{onSuccess:function(chatRoom){console.log(1,chatRoom);//注册自定义消息varpropertys=["title","submitAPI","questions"];//消息类中的属性名registerMessage("QA",properties);//加入聊天室成功console.log("加入聊天室成功");that.chatRoom=chatRoom;reslove()//调用示例},onError:function(error){alert("加入聊天室失败。");//加入聊天室失败},onMessage:function(message){console.log(message);//if(message.objectName=="s:QA"&&!message.offLineMessage){////qaLive(message.content);//}that.updateDanmu(message.content.content);这里算是融云监听事件,必须写setTimeout(that.top,100);//让他滚动到bottom}});});functionregisterMessage(type,propertys){varmessageName=type;//消息名称varobjectName="s:"+type;//消息内置名称,请按此命名format*:*.varmesasgeTag=newRongIMLib.MessageTag(true,true);//truetrue保存统计,falsefalse不保存统计。RongIMClient.registerMessageType(messageName,objectName,mesasgeTag,properties);}//updateDanmuupdateDanmu(message){varthat=this;$("#video-body").append(消息);this.txtInput="";},确认输入事件复制和粘贴以将txtInput值更改为您的值OK发送getRandomColor(){varcolorArr=['1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];变种颜色=“”;for(vari=0;i<6;i++){color+=colorArr[Math.floor(Math.random()*15)];}返回“#”+颜色;},getTmp(name,txtInput,color){return''+name+":"+txtInput+'

'},confirmInput(){if(this.txtInput.trim()==""){alert("输入内容");返回;}那个=这个;varchatRoom=this.chatRoom;//因为评论需要带名字,所以这里需要操作domvarcontent=that.getTmp(that.rytokenInfo.info.nickname,that.txtInput,this.getRandomColor())this.sendInfo(content);//聊天室信息this.chatRoom.getInfo({order:RongIMLib.GetChatRoomType.REVERSE,//排序方法memberCount:10//0-20},{onSuccess:function(chatRoomInfo){console.log("获取聊天室信息成功");console.log(chatRoomInfo);},onError:function(error){}});//聊天室信息this.chatRoom.getInfo({order:RongIMLib.GetChatRoomType.REVERSE,//排序方式。memberCount:10//0-20},{onSuccess:function(chatRoomInfo){console.log("获取聊天室信息成功");控制台日志(聊天室信息);},onError:函数(错误){}});},gitURLhttps://github.com/978744151/...不懂的话。对小程序感兴趣。困难。可以加QQ交流978744151(另外小程序h5前端兼职)