admin管理员组文章数量:1660066
首先,说一下使用情况。因为需求,需要做一个聊天室页面,因为不是专门的点对点聊天,是类似直播,但是是文字直播平台的那种。现在一般的课堂,可能会需要这种。分为2个端,一个是讲师端,一个是用户端。讲师端可能是单独的APP。用户端的页面可能是内嵌到专门的APP,或者是微信公众平台。我这次做的就是一个用户端。讲师端由原生来写,因为需要H5页面能兼容微信还有在手机端都能用。
然后,说明一下,用了vue的UI框架是vux(下次可能就不会用这个了,其中Scroller竟然不维护了!),用的webpack打包。
一切就绪,画页面,就是类似直播平台。用vux快速画好。
先确认需求,1.需要老师能撤回,然后客户端同时将数据从数组删除。2.能播放语音。3.讲师区是下拉加载更多,观众区是上拉加载更多。4.因为ios的输入法有联想词一栏,所以为了能正常输入文字,最后决定使用一个弹框,弹框里面有textarea进行输入文字。5.讲师发的图片。需要客户端能点开,变成大图。(简易版本,暂时无双指放大和双击放大)。6.讲师可以禁言。而客户端需要相应的改样式,禁止输入。差不多就是这些需求。
开始准备:
1.去融云官网注册账号。其实对我们前端来说,只是需要一个appkey。
2.拿到appkey,就相当于拿到大门钥匙。这个时候可以开始写js文件进行连接了。po上一张文件的内容。
主要是在views里面的index.vue写的文件。因为页面只有一个,所以我的路由写在了main.js(别说我没写路由,哈哈哈哈)。
好了,接下来我们要先进行连接。那么我写在utils.js就是从官网上扣下来的js文件,顺便封装一下,为了能在index.vue中取值,这边添加了一个回调函数。
export default {
init(params, callbacks, modules) {
var appKey = params.appKey;
var token = params.token;
// var navi = params.navi || "";
modules = modules || {};
var RongIMLib = modules.RongIMLib || window.RongIMLib;
var RongIMClient = RongIMLib.RongIMClient;
// var protobuf = modules.protobuf || null;
var config = {};
var dataProvider = null;
var imClient = params.imClient;
if (imClient) {
dataProvider = new RongIMLib.VCDataProvider(imClient);
}
RongIMLib.RongIMClient.init(appKey, dataProvider, config);
//语音播放初始化
RongIMLib.RongIMVoice.init();
var instance = RongIMClient.getInstance();
// 连接状态监听器
RongIMClient.setConnectionStatusListener({
onChanged: function(status) {
// console.log(status);
switch (status) {
case RongIMLib.ConnectionStatus["CONNECTED"]:
case 0:
console.log("连接成功");
callbacks.getInstance && callbacks.getInstance(instance);
break;
case RongIMLib.ConnectionStatus["CONNECTING"]:
case 1:
console.log("连接中");
break;
case RongIMLib.ConnectionStatus["DISCONNECTED"]:
case 2:
console.log("当前用户主动断开链接");
break;
case RongIMLib.ConnectionStatus["NETWORK_UNAVAILABLE"]:
case 3:
console.log("网络不可用");
break;
case RongIMLib.ConnectionStatus["CONNECTION_CLOSED"]:
case 4:
console.log("未知原因,连接关闭");
break;
case RongIMLib.ConnectionStatus["KICKED_OFFLINE_BY_OTHER_CLIENT"]:
case 6:
alert("用户账户在其他设备登录,本机会被踢掉线");
break;
case RongIMLib.ConnectionStatus["DOMAIN_INCORRECT"]:
case 12:
console.log("当前运行域名错误,请检查安全域名配置");
break;
}
}
});
//开始链接
RongIMClient.connect(
token,
{
onSuccess: function(userId) {
callbacks.getCurrentUser &&
callbacks.getCurrentUser({
userId: userId
});
console.log("链接成功,用户id:" + userId);
},
onTokenIncorrect: function() {
console.log("token无效");
},
onError: function(errorCode) {
console.log(errorCode);
}
},
params.userId
);
/*
文档:http://www.rongcloud/docs/web.html#3、设置消息监听器
注意事项:
1:为了看到接收效果,需要另外一个用户向本用户发消息
2:判断会话唯一性 :conversationType + targetId
3:显示消息在页面前,需要判断是否属于当前会话,避免消息错乱。
4:消息体属性说明可参考:http://rongcloud/docs/api/js/index.html
*/
版权声明:本文标题:融云集成一个聊天室页面(vue版本) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1729838225a1214558.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论