easeChat模块demo实现静态聊天窗口测试源码分享

easeChat模块demo（vue+api实现会话列表滑动删除静态，我曾用于手机推币城APP中的房间用户聊天功能）聊天窗口界面静态页面，
发送文本消息/消除最新消息/监听消息等环信的接口数据交互功能

*****使我代码的时候，一定记住config.xml里面，关于环信的value，
环信开发控制台官网申请key，vuale修改完之后，上传到云端编译才会有效*******

message_frm.html代码片段 置顶删除暂时没有做动态数据交换，只是实现了静态功能，留下的点击删除置顶事件，数据交互功能后期会完善

<body>
<div class="list" v-cloak>
<div class="search-gap">
<div class="middle flex-wrap">
<img class="left_img" src="../image/icon/icon_search.png" @click="fnSearch();" />
<input id="searchText" type="text" placeholder="搜索消息" v-on:input="fnInput();" />
<img id="clear" class="right_img" src="../image/login/icondelete.png" @click="fnClear();" />
</div>
</div>
<div class="item border-1px-bottom" v-for="(lists,index) in list">
<div class="swiper-li">
<div class="thum flex-wrap" @click="fnOpenChat(lists.name,lists.id);">
<div class="left-img">
<!-- src="../image/defaults/default_pic.png" -->
<img v-bind:src="lists.img" v-bind:alt="lists.name" />
<div class="badge">{{lists.badge}}</div>
</div>
<div class="flex-con">
<div class="center-name">{{lists.name}}</div>
<div class="center-body ellipsis-1">{{lists.body}}</div>
</div>
<div class="right-time">
{{lists.time|formatTime}}
</div>
</div>
<div class="btn">
<div class="settop" @click="fnSetTop(index);">
置顶
</div>
<div class="dell" @click="fnDell(index);">
删除
</div>
</div>
</div>
</div>
</div>
</body>

<!-- 封装滴 滑动 删除-->
<script type="text/javascript" src="../script/swiper.js"></script>
<script type="text/javascript">
var eClear, eSearchText, eSearchTextval;
apiready = function() {
// 初始化vue
fnInitVue();
};

function fnInitVue() {
window.ListVue = new Vue({
el: ‘.list‘,
data: {
list: []
},
mounted: function() {
this.$nextTick(function() {
// 初始化数据
fnInit();
// 初始化下拉刷新
fnsetRefreshHeaderInfo();
// 加载会话数据
fnRequestList();
});
},
methods: {
//搜索按钮
fnSearch: function() {

},
//监听输入框
fnInput: function() {
// 获取输入框内容变化
eSearchTextval = $api.val(eSearchText);
if (eSearchTextval != "") {
eClear.style.display = "block";
} else {
eClear.style.display = "none";
}
},
//清空输入框
fnClear: function() {
$api.val(eSearchText, "");
eClear.style.display = "none";
},
//打开聊天窗口
fnOpenChat: function(name, id) {
api.openWin({
name: ‘chat‘,
url: ‘./chat/chat_win.html‘,
slidBackEnabled: true,
pageParam: {
nickname: name,
id: id,
}
})
},
fnSetTop: function(index) {
console.log("置顶" + index);
},
fnDell: function(index) {
console.log("删除" + index);
}
},
filters: {
formatTime: function(v) {
return new Date(v).popular();
}
},
watch: {}
})
}

//打开swiper.js滑动删除特效 3.56是删除跟置顶的宽度
复制代码

此页面底部输入框，需要在开发控制台添加模块UIChatBox模块，模块官网文档地址请详细阅读文档使用！有问题也可以在总贴回复我看见会给你们解答，
chat_frm.html：代码片段

<section class="chat">
<div class="record" id="record">
<div class="upper" id="upper">
<img src="../../image/icon/iconupper.gif" />
<div class="title">上滑取消发送</div>
</div>
<div class="release" id="release">
<img src="../../image/icon/iconrelease.png" />
<div class="title">松开手指取消发送</div>
</div>
</div>
<div class="chat-header"><span>2016年7月13日</span></div>
<div class="chat-item chat-left">
<div class="chat-media">
<img src="../../image/defaults/default_pic.png" />
</div>
<div class="chat-inner flex-wrap">
<div class="chat-contentimg">
<img src="../../image/defaults/default_pic.png" />
</div>
<div class="chat-status">
<i class="iconfont icon-correct"></i>
</div>
</div>
</div>
</div>
</section>

<script type="text/javascript">
var UIChatBox, frameHeight, eRecord, eUpper, eRelease, inputBarHeightsum;
apiready = function() {
console.log(api.pageParam.conversationid + "*****" + api.pageParam.type)
fnInitVue();
};

function fnInitVue() {
window.ListVue = new Vue({
el: ‘.chat‘,
data: {
chat: []
},
mounted: function() {
this.$nextTick(function() {
//初始化数据
fnInit();
//设置页面到最顶部
resizeFrame(50);
//获取环信聊天消息
fnMessageFromDB(api.pageParam.conversationid, api.pageParam.type);
//初始化下拉加载
fnsetRefreshHeaderInfo();
});
},
methods: {
fnOpenInfo: function(name, id, img) {
api.openWin({
name: ‘my_info‘,
url: ‘widget://html/my/my_info_win.html‘,
slidBackEnabled: true,
pageParam: {
nickname: ‘王宝宝‘,
id: 1,
img: img
}
})
}
}
})
}

// 定义一个全局的聊天数组
var message_data = [];

function fnsetRefreshHeaderInfo() {
api.setRefreshHeaderInfo({
loadingImg: ‘widget://image/refresh.png‘,
bgColor: ‘#fff‘,
textColor: ‘#ccc‘,
textDown: ‘下拉刷新...‘,
textUp: ‘松开刷新...‘
}, function(ret, err) {
//在这里从服务器加载数据，加载完成后调用api.refreshHeaderLoadDone()方法恢复组件到默认状态
api.refreshHeaderLoadDone();
if (ret) {
//获取第一条（最早的一条）
if (message_data.length > 0) {
var _lastid = message_data[0].messageId;
// 调取环信聊天消息接口
fnMessageFromDB(api.pageParam.conversationid, api.pageParam.type, true, _lastid);
}
} else {
toast("APICloud环信DEMO：" + err.msg);
}
});
}

// 加载数据
function fnLoadMessageFromDB(_ret, _loadMore) {
if (_ret.messages.length == 0) {
toast("没有更多了");
}
// 对数据进行渲染
fnUpdateMessageFromDB(_ret.messages, _loadMore);
}

//渲染数据
function fnUpdateMessageFromDB(data_, _loadMore) {
message_data = data_.concat(message_data);
if (_loadMore) {
// 加载数据
window.ListVue.chat = data_.concat(window.ListVue.chat);
} else {
//没有追加直接显示
window.ListVue.chat = data_;
};

};

//追加一条最新数据
function fnAddanew(data_, addanew_) {
//新旧数组拼接
message_data = data_.concat(message_data);
if (addanew_) {
console.log(JSON.stringify(data_))
// 追加最新一条
window.ListVue.chat = window.ListVue.chat.concat(data_);
//设置页面到最顶部
resizeFrame(inputBarHeightsum);
}
}

复制代码

11月20日:
修复一些bug 增加了发送文本消息，消除最新消息数 前端其他文件代码自行下载研究。
环信接口此块需要注意
easeChat.addMessageListener({
name: ‘receive‘
}, function(ret) {
环信监听消息，console.log(JSON.stringify(ret.messages))打印的是数组{"isPushMsg":false,"messages":
[{"messageId":"537527514856167428","timestamp":1542717677272,"chatType":"chat","direction":"receive","body":{"type":"text","text":"太可怜了"},"localTime":1542717677358,"isReadAcked":false,"conversationId":"zhouheng","from":"zhouheng","isDeliverAcked":true,"isRead":false,"status":"successed","to":"wangbaobao"}]
}
然后字段messages/message也不同
easeChat.sendText
发送文本消息，
console.log(JSON.stringify(ret.message));打印的是对象
{"status":true,"message":{"messageId":"15427176765730178","conversationId":"wangbaobao","direction":"send","from":"zhouheng","to":"wangbaobao","timestamp":1542717676575,"localTime":1542717676573,"chatType":"chat","status":"pending","isReadAcked":false,"isDeliverAcked":false,"isRead":true,"ext":{},"body":{"type":"text","text":"太可怜了"}
}

//监听消息事件
function fnAddMessageListener() {
var easeChat = api.require(‘easeChat‘);
easeChat.addMessageListener({
name: ‘receive‘
}, function(ret) {
if (ret) {
//获取到消息刷新一下会话列表
fnGetAllConversations();
// 向聊天消息追加一条消息
api.execScript({
name: ‘chat‘,
frameName: ‘chat_frm‘,
script: ‘fnAddanew(‘ + JSON.stringify(ret.messages) + ‘,‘ + true + ‘);‘
});
} else {
toast("APICloud环信DEMO：" + ret.msg);
}
});
}

// 获取环信会话列表
function fnGetAllConversations() {
easeChat = api.require(‘easeChat‘);
easeChat.getAllConversations(function(ret) {
var _total = 0;
for (var i in ret.conversations) {
_total += ret.conversations[i].unreadMessagesCount;
}
//存储未读消息总数
$api.setStorage(‘unread_total‘, _total);
//刷新底部导航消息数
api.execScript({
name: ‘main‘,
script: ‘fnNewsBadge(‘ + _total + ‘);‘
});
//刷新会话列表消息
api.execScript({
name: ‘main‘,
frameName: ‘message‘,
script: ‘fnRequestList(‘ + JSON.stringify(ret) + ‘);‘
});
});
}

//新建或获取一个会话 安卓同样支持
function fnGetConversation(conversationId_, type_) {
var easeChat = api.require(‘easeChat‘);
easeChat.getConversation({
conversationId: conversationId_,
type: type_,
ifCreate: true
}, function(ret, err) {
if (ret.status) {
console.log(JSON.stringify(ret))
} else {
toast("APICloud环信DEMO：" + err.msg);
}
});
}

//获取聊天消息
function fnMessageFromDB(_conversationid, _type, _loadMore, _lastid) {
var easeChat = api.require(‘easeChat‘);
easeChat.loadMessageFromDB({
conversationId: _conversationid,
type: _type,
startMsgId: _lastid,
pagesize: 6 //没加载6条信息
}, function(ret, err) {
console.log(JSON.stringify(ret))
if (ret) {
// 加载chat_frm页面fnLoadMessageFromDB聊天消息
fnLoadMessageFromDB(ret, _loadMore);
} else {
toast("APICloud环信DEMO：" + err.msg);
}
});
}

//点击消息已读
function fnMarkAllMessagesAsRead(conversationId_, type_) {
var easeChat = api.require(‘easeChat‘);
easeChat.markAllMessagesAsRead({
conversationId: conversationId_,
type: type_
}, function(ret, err) {
if (ret.status) {
// console.log(JSON.stringify(ret));
} else {
toast("APICloud环信DEMO：" + err.msg);
}
});
}

//将指定消息设置为已读
function fnMarkMessageAsRead(conversationId_, type_, messageId_) {
var easeChat = api.require(‘easeChat‘);
easeChat.markMessageAsRead({
conversationId: conversationId_,
type: type_,
messageId: messageId_
}, function(ret, err) {
if (ret) {
// api.alert({ msg:JSON.stringify(ret)});
} else {
api.toast({
msg: ‘APICloud环信DEMO：‘ + JSON.stringify(err),
duration: 2000,
location: ‘bottom‘
});
}
});
}

//发送文本消息
function fnEaseChatSendText(conversationId_, chatType_, text_, from_, to_) {
var easeChat = api.require(‘easeChat‘);
easeChat.sendText({
conversationId: conversationId_, //此字段为会话id一开始可以对话可以为空
chatType: chatType_, //会话类型chat：单聊会话 groupChat：群聊会话 chatRoom：聊天室会话
text: text_, //发送的消息内容
from: from_, //发送方当前登录账号
to: to_, //接受方
ext: {} // //JSON 对象；消息扩展，Key值类型必须是NSString, Value值类型必须是NSString或者 NSNumber类型的 BOOL, int, unsigned in, long long, double
}, function(ret, err) {
console.log(JSON.stringify(ret))
if (ret.status) {
// 刷新一下首页列表消息
fnGetAllConversations();
// 向聊天消息追加一条消息
api.execScript({
name: ‘chat‘,
frameName: ‘chat_frm‘,
script: ‘fnAddanew(‘ + JSON.stringify([ret.message]) + ‘,‘ + true + ‘);‘
});
//将指定消息设置为已读
fnMarkMessageAsRead(ret.message.conversationId, ret.message.chatType, ret.message.messageId);
} else {
toast("APICloud环信DEMO：" + err.msg);
}
});
}

main.html

// 设置最新消息数
function fnNewsBadge(_number) {
if (_number >= 0) {
$api.setStorage(‘unread_total‘, _number);
}
if (_number < 99) {
window.rootVue.footer[0].number = _number;
} else {
window.rootVue.footer[0].number = ‘99+‘;
}

原文地址：https://www.cnblogs.com/tuituile/p/11703346.html

时间： 2024-08-07 04:29:51

easeChat模块demo实现静态聊天窗口测试源码分享的相关文章

erlang下lists模块sort（排序）方法源码解析(二)

上接erlang下lists模块sort(排序)方法源码解析(一),到目前为止,list列表已经被分割成N个列表,而且每个列表的元素是有序的(从大到小) 下面我们重点来看看mergel和rmergel模块,因为我们先前主要分析的split_1_*对应的是rmergel,我们先从rmergel查看,如下 ....................................................... split_1(X, Y, [], R, Rs) -> rmergel([[Y, X

3D语音天气球（源码分享）——完结篇

开篇废话: 由于这篇文章是本系列最后一篇,有必要进行简单的回顾和思路整理. 这个程序是由两部分组成,Android端和Unity端: 1.Unity端负责3D球的创建,显示和旋转:3D语音天气球(源码分享)--创建可旋转的3D球 2.通过天气服务动态创建3D球:3D语音天气球(源码分享)--通过天气服务动态创建3D球 3.Android端使用第三方的语音服务来进行语音识别:3D语音天气球(源码分享)--在Unity中使用Android语音服务 4.Unity中加入Android项目:Unity中

推荐！Html5精品效果源码分享

一直在看别人的汇总,看到了一些不错的关于 HTML5内容的源码,我也汇总下分享出来,好东西需要共享!希望可以帮到需要的朋友. 1.劲爆分享:HTML5动感的火焰燃烧动画特效 这又是一款基于HTML5的超炫动画特效,是一款动感的火焰燃烧动画效果.这款HTML5动画火焰燃烧非常逼真,之前我们也分享过一些其他的HTML5火焰燃烧动画,比如:HTML5 Canvas火焰燃烧动画和纯CSS3实现打火机火焰动画.一般像这样的HTML5动画都是基于Canvas的,今天的这款也不例外.源码下载地址:劲爆分享:H

AppCan 移动应用开发项目源码分享：嗡嗡旅游App开发

开发者介绍:老家湖北巴东好山好水,神农溪.巴人河.三里城等都是旅游好去处.中秋节回了趟老家,看到家乡的原生态景色吸引了大批游客,由此萌发了想法:用移动技术开发一个App试水,把家乡景点介绍给更多的人.于是,耗时一个月的<嗡嗡旅游>应运而生,特此将项目源码分享给广大AppCan开发者. 项目实现功能 用户注册.登录,游记查看和发布,查看辖区内景区.酒店.交通.攻略等信息,内容收藏.评论和分享,查看地图,景区门票.酒店电话预定等. 项目使用插件 引导页 引导页3张图片采用的是全屏显示的slider

3D语音天气球（源码分享）——通过天气服务动态创建3D球

转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 开篇废话: 这个项目准备分四部分介绍: 一:创建可旋转的"3D球":3D语音天气球(源码分享)--创建可旋转的3D球 二:通过天气服务,从网络获取时实天气信息并动态生成"3D球" 三:Android语音服务和Unity的消息传递 四:Unity3D端和Android端的结合 关于项目的详细介绍和3D球的创建请看上面第一篇文章(重要) 今天主要讲解如何通过获取

WP8.1&amp;Win10幸运大转盘源码分享

先AD一下我的群:Win10开发者群:53078485 最近在写一个APP,其中需要一个转盘动画的源码,找了很多但是都没有找到,无奈只好自己来写,写完效果自己还是比较满意的,分享出来,有需要的童鞋可以拿去用. 先来一张效果图: 功能: 1.五个奖项的中奖几率可以自由调整. 2.用户的金币信息云端存储. 3.每天可以免费抽奖一次. 4.金币信息自由定义. 5.其他,请自行挖掘. 需要准备的: A.图片素材:demo包里有,可以自行提取出来使用,我这个转盘感觉不是特别圆润,也可以自己作图来替换掉.

用户手机号获取验证码注册源码分享

叮~ 你的源码分享纯干货到了, 请注意查收! 用户手机号注册源码分享,首页获取验证码,调用阿里大鱼短信验证码,接口thinkphp5.2写的,可以判断手机号是否注册,短信发送是否成功. <!DOCTYPE html><html>        <head>                <meta charset="utf-8">                <meta name="viewport" cont

【迪士尼彩乐园】全套源码分享下载带急速赛车，后台带AB盘完美无错

[迪士尼彩乐园]全套源码分享下载带急速赛车,后台带AB盘完美无错 运行环境:php5.2+mysql 下载地址:http://fanshubbs.com/thread-245-1-1.html 源码类别:时时彩(彩票)现金网系统/两面盘 界面语言:简体中文 源码授权:无加密文件及认证授权,永久性可直接使用. 版本支持:PC/WAP网页版 编程语言:PHP 手机版独家对接的,完整无错! 此源码经过测试人员实测截图,保证100%和截图一致!!! 原文地址:https://www.cnblogs.co

【迪士尼彩乐园】全套源码分享下载带三个急速，后台带AB盘完美无错

[迪士尼彩乐园]全套源码分享下载带三个急速,后台带AB盘完美无错联系Q:2947702644 源码类别:时时系统/两面盘界面语言:简体中文源码授权:无加密文件及认证授权,永久性可直接使用.版本支持:PC/WAP网页版编程语言:PHP ThinkPHP是一个快速.简单的基于MVC和面向对象的轻量级PHP开发框架,遵循Apache2开源协议发布,从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,尤其注重开发体验和易用性,并且拥有众多的原创功能和特性,为WEB应用开发提供了强有