前言：因为我是业余的前端，所以在做融云web通信的时候遇到了很多问题，可能站在前端的角度，我解决的办法不是很完美，所以我希望如果有人看到了多给我一些提点 谢谢！
我不是标题党，我今天要说的就是基于融云的web开发简单的文字通信。 要了解一定php js java 页面之间的参数传递我是在php环境完成的 注册是在java 这种java和php之间的转换也是很简单的
如果要做到两个界面之间互发消息还能查询历史消息，就必须开通公有云专业版后，开启单群聊消息云存储。如果是自己娱乐我觉得没必要去开通，因为实在是太贵了（我做的时候用的是公司给的账号）。这个先跳过进入正题
一、注册融云的账号 (注册账号放在后台会比前端安全，如果放在前端注册，一些懂程序的会盗取你的appKey和appSecret)
/**
* 注册rongCloud账号
* @param agent
* string userModel.id 唯一标识，最大长度 30 个字符，建议使用 英文字母、数字 混排
* string userModel.name 名称，最大长度 60 个字符
* string userModel.portrait 合法的头像地址，最大长度 800 个字符
* @return
* "code": 200,
* "userId":
* "token":
*/
@PostMapping("/registerUser")
public void registerUser(Agent agent){
try {
PrintWriter out = response.getWriter();
//给jedis赋值
JedisTest.initJedis();
if(JedisTest.jedis.get(agent.getAgentId().toString()) != null) {
System.out.println("----------从缓存获取用户token信息"+agent.getAgentId());
String userInfo = JedisTest.jedis.get(agent.getAgentId().toString());
out.write(userInfo);
JedisTest.closeJedis();
return;
}
//appKey, appSecret自己注册融云后的账号
RongCloud rongCloud = RongCloud.getInstance(appKey, appSecret);
User User = rongCloud.user;
UserModel user = new UserModel()
.setId(agent.getAgentId().toString())
.setName(agent.getAgentName())
.setPortrait(agent.getAgentAvatar());
TokenResult result = User.register(user);
System.out.println("getToken: " + result.toString());
//存入到redis缓存
System.out.println("----------存放用户信息");
//setex设置缓存时间
JedisTest.jedis.setex(agent.getAgentId().toString(),72000,result.toString());
JedisTest.closeJedis();
out.write(result.toString());
}catch (Exception e){
System.out.println("注册rongCloud账号出错" + e.getMessage());
}
}直接复制会有jedis报错，我的jediis代码就不贴出来了，因为我的jedis服务器搭建在linux系统一两句在这也说不清 你可以直接用自己的方式存放就好,缓存可以避免一直获取token
这是rongcloud mavenjar
<!--rongcloud通信jar包-->
<dependency>
<groupId>cn.rongcloud.im</groupId>
<artifactId>server-sdk-java</artifactId>
<version>3.0.1</version>
</dependency>
二、对融云方法的封装 （以下代码是我自己封装的js文件）
function RongCloud(){
}
RongCloud.prototype = {
constructor: RongCloud,
/**
* 初始化融云服务,并启动消息监听
* @param appkey app的唯一标识
*/
initRong: function (appkey) {
RongIMClient.init(appkey); //appkey
// 设置连接监听状态 （ status 标识当前连接状态）
// 连接状态监听器
RongIMClient.setConnectionStatusListener({
onChanged: function (status) {
switch (status) {
//链接成功
case RongIMLib.ConnectionStatus.CONNECTED:
console.log('链接成功');
break;
//正在链接
case RongIMLib.ConnectionStatus.CONNECTING:
console.log('正在链接');
break;
//重新链接
case RongIMLib.ConnectionStatus.DISCONNECTED:
console.log('断开连接');
break;
//其他设备登录
case RongIMLib.ConnectionStatus.KICKED_OFFLINE_BY_OTHER_CLIENT:
console.log('其他设备登录');
break;
//网络不可用
case RongIMLib.ConnectionStatus.NETWORK_UNAVAILABLE:
console.log('网络不可用');
break;
}
}
});
this.monitor();
},
/**
* 用户用token连接融云服务器
* @param token 用户的聊天token
*/
connectSession: function (callback,token) {
// 连接融云服务器。
RongIMClient.connect(token, {
onSuccess: function (userId) {
console.log("Login successfully." + userId);
callback && callback(true, userId);
},
onTokenIncorrect: function () {
console.log('token无效' + userId);
callback && callback(false, userId);
},
onError: function (errorCode) {
var info = '';
switch (errorCode) {
case RongIMLib.ErrorCode.TIMEOUT:
info = '超时';
break;
case RongIMLib.ErrorCode.UNKNOWN_ERROR:
info = '未知错误';
break;
case RongIMLib.ErrorCode.UNACCEPTABLE_PaROTOCOL_VERSION:
info = '不可接受的协议版本';
break;
case RongIMLib.ErrorCode.IDENTIFIER_REJECTED:
info = 'appkey不正确';
break;
case RongIMLib.ErrorCode.SERVER_UNAVAILABLE:
info = '服务器不可用';
break;
}
console.log(errorCode);
}
});
},
/**
* 消息监听
*/
monitor:function (){
// 消息监听器
RongIMClient.setOnReceiveMessageListener({
// 接收到的消息
onReceived: function (message) {
// 判断消息类型
switch (message.messageType) {
case RongIMClient.MessageType.TextMessage:
// 发送的消息内容将会被打印
console.log("message.content.content------" + JSON.stringify(message.content.content));
console.log('收到发送的消息');
if(typeof writeInContent != 'undefined'){ //在聊天页面才写入数据
writeInContent(1,message.content.content,message.senderUserId,'');//给接收者写入最新数据
}
break;
case RongIMClient.MessageType.VoiceMessage:
// 对声音进行预加载
// message.content.content 格式为 AMR 格式的 base64 码
RongIMLib.RongIMVoice.preLoaded(message.content.content);
break;
case RongIMClient.MessageType.ImageMessage:
// do something...
break;
case RongIMClient.MessageType.DiscussionNotificationMessage:
// do something...
break;
case RongIMClient.MessageType.LocationMessage:
// do something...
break;
case RongIMClient.MessageType.RichContentMessage:
// do something...
break;
case RongIMClient.MessageType.DiscussionNotificationMessage:
// do something...
break;
case RongIMClient.MessageType.InformationNotificationMessage:
// do something...
console.log('收到小灰条信息')
break;
case RongIMClient.MessageType.ContactNotificationMessage:
// do something...
break;
case RongIMClient.MessageType.ProfileNotificationMessage:
// do something...
break;
case RongIMClient.MessageType.CommandNotificationMessage:
// do something...
break;
case RongIMClient.MessageType.CommandMessage:
// do something...
break;
case RongIMClient.MessageType.UnknownMessage:
// do something...
break;
case RongIMClient.RegisterMessage.PersonMessage:
// do something...
break;
default:
// 自定义消息
// do something...
}
}
});
},
/**
* 获取会话列表
* @param callback 消息回调参数
* @return boolean 是否成功的状态码
* @return list 会话列表集合
*/
getSessionList: function (callback) {
RongIMClient.getInstance().getConversationList({
onSuccess: function(list) {
console.log("会话列表--"+ JSON.stringify(list))
callback && callback(true, list);
},
onError: function(error) {
// do something...r
result = "获取会话列表失败！"
callback && callback(false, result);
}
},null);
},
/**
* 获取指定的会话
* @param callback 消息回调参数
* @return boolean 是否成功的状态码
* @return list 会话列表集合
*/
getSessionListBytargetId: function(callback, targetId) {
var conversationType = RongIMLib.ConversationType.PRIVATE;
RongIMLib.RongIMClient.getInstance().getUnreadCount(conversationType,targetId,{
onSuccess:function(count){
// count => 指定会话的总未读数。
callback && callback(true, count);
},
onError:function(){
result = "获取会话列表失败！"
callback && callback(false, result);
}
});
},
/**
* 清空和莫个人的未读消息数
* @param callback 消息回调参数
* @param targetId 要清楚和谁的会话消息数
*/
cleanMessageCount: function (targetId) {
var conversationType = RongIMLib.ConversationType.PRIVATE;
RongIMClient.getInstance().clearUnreadCount(conversationType,targetId,{
onSuccess:function(){
console.log("清除未读消息数成功！");
},
onError:function(error){
console.log("清除未读消息数错误！"+ error);
}
});
},
/**
* 获取自己和莫个人的聊天记录
* @param callback 消息回调参数
* @param conversationType 私聊,其他会话选择相应的消息类型即可。
* @param targetId 想获取自己和谁的历史消息，targetId 赋值为对方的 Id。
* @param timestrap 默认传 null，若从头开始获取历史消息，请赋值为 0 ,timestrap = 0;
* @param count 每次获取的历史消息条数，范围 0-20 条，可以多次获取。
* @return list 聊天数据集合
* @return hasMag 是否还有历史记录 有位true
*/
getHistoryById: function (callback,conversationType,targetId,timestrap,count) {
RongIMLib.RongIMClient.getInstance().getHistoryMessages(conversationType, targetId, timestrap, count, {
onSuccess: function(list, hasMsg) {
// list => Message 数组。
// hasMsg => 是否还有历史消息可以获取。
// console.log("targetId------" + targetId);
// console.log("GetHistoryMessages:list" + JSON.stringify(list));
callback && callback(hasMsg, list);
},
onError: function(error) {
console.log("获取历史" , error);
callback && callback(false, error);
}
});
},
sendMessage :function(targetId,content,extra) {
var msg = new RongIMLib.TextMessage({content:content,extra:extra});
var conversationtype = RongIMLib.ConversationType.PRIVATE; // 单聊,其他会话选择相应的消息类型即可。
var targetId = targetId; // 目标 Id
RongIMClient.getInstance().sendMessage(conversationtype, targetId, msg, {
onSuccess: function (message) {
//message 为发送的消息对象并且包含服务器返回的消息唯一Id和发送消息时间戳
console.log("Send successfully");
},
onError: function (errorCode,message) {
var info = '';
switch (errorCode) {
case RongIMLib.ErrorCode.TIMEOUT:
info = '超时';
break;
case RongIMLib.ErrorCode.UNKNOWN_ERROR:
info = '未知错误';
break;
case RongIMLib.ErrorCode.REJECTED_BY_BLACKLIST:
info = '在黑名单中，无法向对方发送消息';
break;
case RongIMLib.ErrorCode.NOT_IN_DISCUSSION:
info = '不在讨论组中';
break;
case RongIMLib.ErrorCode.NOT_IN_GROUP:
info = '不在群组中';
break;
case RongIMLib.ErrorCode.NOT_IN_CHATROOM:
info = '不在聊天室中';
break;
default :
info = x;
break;
}
console.log('发送失败:' + info);
}
}
);
}
}
代码太多不过要解释的只有一个地方：
在消息监听的那个方法中我做了一个if判断如果当前在聊天页面，那么我就把收到的消息写入到聊天页面。
其实走到这一步就得靠自己的逻辑去完成了
要聊天首先得要有两个页面 会话页面 和 消息页面因为是web端的所以每个页面都得调用初始化融云服务和登录融云 （具体实现方法“参照”三四）三四只能参照
1.用注册的账号去发送消息给另一个账号产生一个会话（相当于qq的加好友） 发送消息的是注册融云的id（是自己手动输入的注册融云的那个值）
三、会话页面(这个我是在php的环境下完成的)<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>会话</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<!-- Mobile Devices Support @begin -->
<meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
<meta content="telephone=no, address=no" name="format-detection">
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- apple devices fullscreen -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<head>
<style>
*{
padding: 0px;
margin: 0px;
outline: 0;
list-style:none;
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari */
}
#main{
width: 100%;
height: 100%;
}
.sessionData{
width: 100%;
height: 70px;
border-bottom: 1px #999999 solid;
}
.imgDiv{
float:left; width: 50px;
height: 50px;
margin-left:30px;
margin-top:10px;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border:solid 2px #FFFFFF;
}
.nameAndMessage{
float:left;
width: 50%;
height: 50px;
margin-left:10px;
margin-top:10px;
font-size: 12px
}
.agentName{
margin: 0;
padding: 0;
height: 25px;
width: 50%;
line-height: 28px;
overflow:hidden
}
.message{
margin: 0;
padding: 0;
height: 25px;
width: 50%;
line-height: 22px;
overflow:hidden
}
.date{
float:right;
margin: 0;
margin-left: 20px;
padding: 0;
height: 70px;
width: 50px;
line-height: 70px;
font-size: 12px
}
.count{
float:right;
margin-top: 25px;
margin-right: 20px;
height: 20px;
width: 20px;
line-height: 20px;
text-align: center;
font-size: 12px;
background: red;
color: #FFFFFF;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
}
/*加载数据时隐藏源代码*/
[v-cloak] {
display: none;
}
a {
text-decoration:none;
out-line: none;
color: #000000;
}
</style>
</head>
<body>
<div id="main">
<div id="sessionMain">
<div class="sessionData" v-for="(item, index) in items" v-cloak>
<div class="imgDiv">
<img :src="userInfo[index].headImgUrl" width="50px" height="50px"/>
</div>
<a :href="'<?php echo base_url()?>mobile/wx_chat/messagePage?targetId='+item.targetId+'&count='+item.unreadMessageCount">
<div class="nameAndMessage">
<div class="agentName">
{{ userInfo[index].nickName }}
</div>
<div class="message">
{{ item.latestMessage.content.content }}
</div>
</div>
</a>
<div v-if="item.unreadMessageCount === 0">
<div class="date">
{{ dataStr[index] }}
</div>
</div>
<div v-else>
<div class="count">
{{ item.unreadMessageCount }}
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="/js/chat/dataUtil.js" ></script>
<script type="text/javascript" src="/js/chat/rongCloud.js" ></script>
<script type="text/javascript" src="/js/chat/rongConfig.js" ></script>
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/js/vue.min.js"></script>
<script src="https://cdn.ronghub.com/RongIMLib-2.2.5.min.js"></script>
<script type="text/javascript">
//定义缓存对象
window.onload = initRong();
var rongCloud = new RongCloud();
var dateGS = new DateGS();
//定义缓存对象
var userCache = {};
/**
* 初始化融云服务,并启动消息监听
*/
function initRong(){
var rongCloud = new RongCloud();
var rongConfig = new RongConfig();
rongCloud.initRong(rongConfig.getAppkey());
//用户登录rong
loginRong();
}
/**
* 登录融云
*/
function loginRong() {
var rongCloud = new RongCloud();
//获取用户token
var token = "<?php echo $imToken ?>";
rongCloud.connectSession(function(status,userId){
if(status) {
//把自己的token和userId存放到缓存
$.data(userCache, 'token', token);
$.data(userCache, 'userId', userId);
//获取会话
getSessionList();
}else {
alert("登录失败！");
}
},token);
}
/**
* 获取会话列表
*/
function getSessionList() {
if(localStorage.getItem("closeId") != null) {
closeMessageCount();
}
rongCloud.getSessionList(function (status, list) {
if(status) {
var targetIds = '';
for(var i in list){
targetIds += list[i].targetId+",";
}
targetIds = targetIds.substr(0,targetIds.length-1);
//先用加姓名头像 25 24 用户的
//targetIds = "oHNCGjmOMyk87ACKZrZ_A1CEiagA,oHNCGjrgAym1xXiAWsPJfXPChTk4";
// 获取用户信息
$.ajax({
type: "get",
url: "/api/mobile/agentService/getUserInfoByOpenId",
dataType: "text",
data: {openIds:targetIds},
success: function(ret, err) {
var dataStr = [];
for(var i in list) {
dataStr.push(dateGS.getLocalTime(list[i].sentTime));
}
//用户信息
ret = $.parseJSON(ret);
console.log(JSON.stringify(ret))
if(ret.resultCode == 1) {
//vue渲染数据到页面
var sessionMain = new Vue({
el: '#sessionMain',
data: {
token: $.data(userCache, 'token'),
items: list, //融云放回的数据
dataStr: dataStr, //格式化后的消息发送时间
userInfo: ret.extend, //用户的集合
},
})
} else {
alert("获取用户信息失败！");
}
},
error:function(){
$('#content_empty').show();
}
});
}
});
}
/**
* 清空消息数 要清空必须得
* 在这个页面获取一下历史消息才能永久成功
*/
function closeMessageCount() {
//缓存有数据就是有清空的数据
if(localStorage.getItem("closeId") != null) {
rongCloud.getHistoryById(function (hasMag, list) {
//清空数据
rongCloud.cleanMessageCount(localStorage.getItem("closeId"));
localStorage.removeItem("closeId");
},RongIMLib.ConversationType.PRIVATE,localStorage.getItem("closeId"), null, 20);
}
}
</script>
解释一下吧会话页面是通过php控制器跳转的,没有任何的参数。
appkey我也是封装到js里面的因为一些隐私问题我不能把这个js提供出来，你如果注册了融云那么就直接把appkey替换就行
在页面中我用一个ajax去注册融云用户得到返回的token再登录融云,然后再查询会话列表，有些图像用户名称的我是查询的表数据，所以这一步是不能复制粘贴的
四、消息页面 (这个我是在php的环境下完成的)
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<!-- 移动设备支持 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
</head>
<style>
/**重置标签默认样式*/
* {
margin: 0;
padding: 0;
list-style: none;
font-family: '微软雅黑'
}
#container {
width: 100%;
height: 100%;
background: #eee;
position: relative;
}
.header {
width: 100%;
height: 50px;
color: #fff;
background: #999999;
line-height: 50px;
font-size: 20px;
position: fixed;
padding: 0 100px 0px 0px;
top: 0px;
}
.footer {
width: 100%;
height: 50px;
background: #999999;
position: fixed;
bottom: 0;
padding-top: 10px;
padding-bottom: 10px;
}
.footer input {
width: 75%;
height: 45px;
outline: none;
font-size: 20px;
text-indent: 10px;
position: absolute;
border-radius: 6px;
left:3%;
}
.footer span {
display: inline-block;
width: 15%;
height: 48px;
background: #ccc;
font-weight: 900;
line-height: 45px;
cursor: pointer;
text-align: center;
position: absolute;
right: 3%;
border-radius: 6px;
}
.content {
font-size: 20px;
width: 100%;
overflow: auto;
margin-top:50px;
margin-bottom: 70px;
}
.content li {
margin-top: 10px;
width: 100%;
display: block;
clear: both;
overflow: hidden;
}
.content li span{
background: #7cfc00;
padding: 10px;
border-radius: 10px;
margin: 6px 10px 0 10px;
max-width: 310px;
border: 1px solid #ccc;
box-shadow: 0 0 3px #ccc;
}
.imgleft {
float: left;
margin-left: 5px;
}
.imgright {
float: right;
margin-right: 5px;
}
.spanleft{
float: left;
background: #fff;
}
.spanright {
float: right;
background: #7cfc00;
}
/*加载数据时隐藏源代码*/
[v-cloak] {
display: none;
}
</style>
<html>
<body>
<div id="container">
<div class="header">
<span onclick="jump()" style="float:left;width: 12%"><img src="/image/left.png" style="height: 50px;"/></span>
<div id="targetId" style="float:left;text-align: center;line-height: 50px;width: 76%;" v-cloak>{{ targetName }}</div>
<div style="float:left;width: 12%;height: 50px;"></div>
</div>
<ul class="content">
<li style=""></li>
</ul>
<div class="footer">
<input id="text" type="text" placeholder="说点什么吧...">
<span id="btn">发送</span>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="/js/chat/dataUtil.js" ></script>
<script type="text/javascript" src="/js/chat/rongCloud.js" ></script>
<script type="text/javascript" src="/js/chat/rongConfig.js" ></script>
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/js/vue.min.js"></script>
<script src="https://cdn.ronghub.com/RongIMLib-2.2.5.min.js"></script>
<script type="text/javascript">
window.onload = initRong();
var rongCloud = new RongCloud();
//初始化融云服务,并启动消息监听
function initRong(){
var rongCloud = new RongCloud();
var rongConfig = new RongConfig();
rongCloud.initRong(rongConfig.getAppkey());
//用户登录rong
loginRong();
getUserInfo();
//初始化页面
pageInit();
//把要清空的对象id存放到缓存
localStorage.setItem("closeId","<?php echo $targetId ?>");
}
/**
* 把用户头像姓名存放到缓存
*/
function getUserInfo() {
//获取对方的id和自己的id
var targetIdAndSendId = localStorage.getItem("userId") + "," + "<?php echo $targetId?>";
//先用加姓名头像 25 24 用户的 25 是自己的id 24使目标id
//var targetIdAndSendId = "oHNCGjmOMyk87ACKZrZ_A1CEiagA,oHNCGjrgAym1xXiAWsPJfXPChTk4";
// 获取用户信息
$.ajax({
type: "get",
url: "/api/mobile/agentService/getUserInfoByOpenId",
dataType: "text",
data: {openIds:targetIdAndSendId},
success: function(ret, err) {
//用户信息
ret = $.parseJSON(ret);
if(ret.resultCode == 1) {
//vue渲染数据到页面
var header = new Vue({
el: '.header',
data: {
targetName: ret.extend[1].nickName,
},
})
//把用户头像存放到缓存
localStorage.setItem("userImgUrl", ret.extend[0].headImgUrl);
localStorage.setItem("targetImgUrl",ret.extend[1].headImgUrl);
} else {
alert("获取用户头像失败！");
}
},
error:function(){
$('#content_empty').show();
}
});
}
/**
* 登录时获取历史消息
*/
function loginRong() {
//获取用户token
var token = "<?php echo $token ?>";
var rongCloud = new RongCloud();
rongCloud.connectSession(function(status,userId){
if(status) {
//把自己的token和userId存放到缓存
localStorage.setItem("token", token);
localStorage.setItem("userId",userId);
//初始化时获取用户历史消息3-10条
var targetIdPar = "<?php echo $targetId ?>";
var countPar = "<?php echo $count ?>";
getHistory(targetIdPar,parseInt(countPar),0);
}else {
alert("登录失败！");
}
},token);
}
/**
* 初始化融云 和 页面数据渲染
*/
//定义自己的头像地址 和 别人的头像存放
function pageInit(){
var userInfo = {};
var btn = document.getElementById('btn');
var text = document.getElementById('text');
var content = document.getElementsByTagName('ul')[0];
//一定要设置高度才能把数据实时的放在最下面 高度为屏幕分辨率的高减去上下div的高度 上50px 下70px
//还要减去减去初始化3条信息的高度150 网页才能兼容 ix下面会多出一部分不兼容
content.style.height=window.screen.height-120+"px";
btn.onclick = function(){
if(text.value.replace(/\s+/g,"") == '') {
alert("不能发送空白消息");
text.value = '';
return;
}else {
writeInContent(0,text.value,"<?php echo $targetId?>",'');
// 内容过多时,将滚动条放置到最底端
content.scrollTop = content.scrollHeight;
//sendGroupChat(text.value);
sendMessage("<?php echo $targetId?>", text.value);
text.value = '';
}
}
}
/**
* 写入数据到content
* writeFormat 写入在左还是右 0右 1左
* contentText 写入内容
* list 为空表示是单条插入到最底部，为集合表示多条插入到最顶部
*/
function writeInContent(num,contentText,closeId,list) {
var content = document.getElementsByTagName('ul')[0];
var str = '';
for(var i in list) {
//如果发送人时自己那么就显示到右边
if (list[i].senderUserId == localStorage.getItem("userId")) {
str += '<li><img class="imgright" src="'+localStorage.getItem('userImgUrl')+'" width="50px" height="50px"><span class="spanright">'+list[i].content.content+'</span></li>';
} else {
str += '<li><img class="imgleft" src="'+localStorage.getItem('targetImgUrl')+'" width="50px" height="50px"><span class="spanleft">'+list[i].content.content+'</span></li>';
}
}
if(list == '') {
if(num==0){
str = '<li><img class="imgright" src="'+localStorage.getItem("userImgUrl")+'" width="50px" height="50px"><span class="spanright">'+contentText+'</span></li>';
}else {
str = '<li><img class="imgleft" src="'+localStorage.getItem("targetImgUrl")+'" width="50px" height="50px"><span class="spanleft">'+contentText+'</span></li>';
}
content.innerHTML += str;
}else {
$(content).prepend(str);
}
}
//var xfjApiUrl = '<?php echo WX_XFJ_API_URL ?>';
function sendMessage(targetId,contentText) {
rongCloud.sendMessage(targetId,contentText,"");
/*//发送消息
var agentId = localStorage.getItem("userId");
agentId = agentId+"";
targetId = targetId+"";
$.ajax({
type: "post"
,url:xfjApiUrl+"/mobile/wx_chat/publishMessage"
//,url:"http://192.168.10.181:9091/api/mobile/chatService/publishMessage"
,data: {fromUserId:agentId,toUserId:targetId,content:contentText}
,datatype:'text'
,success:function(data){
//发送成功后...
}
,timeout:20000
})*/
}
/**
* 获取和莫个人的聊天记录 并调用写入数据到congten得方法
* @param targetIdPar 和谁的记录
* @param countPar 查询几条
* @param mode 方式 1 为点击加载更多 0为初始化查询
* @return hasMag 真表示还有数据
*/
function getHistory(targetIdPar,countPar,mode){
if (mode == 1) { //点击获取历史消息的时候删除一下加载更多这几个字
$(".jzgd").empty();
}
var rongCloud = new RongCloud();
var conversationType = RongIMLib.ConversationType.PRIVATE; //私聊,其他会话选择相应的消息类型即可。
var targetId= targetIdPar+""; // 想获取自己和谁的历史消息，targetId 赋值为对方的 Id。 字符串类型
var timestrap = null; // 默认传 null，若从头开始获取历史消息，请赋值为 0 ,timestrap = 0; int
var count = parseInt(countPar); // 每次获取的历史消息条数，范围 0-20 条，可以多次获取。 int性
if(1 >= count){ //小于等于1报错 仿qq0的时候查3条
count = 3;
}
if(count >= 20) { //超过二十报错 那么就不让他超过20条
count = 20;
}
rongCloud.getHistoryById(function (hasMag, list) {
writeInContent('','',"<?php echo $targetId ?>",list);
if(parseInt(countPar) != 4 ) { //第一次获取的历史消息数和传过来的未读消息数相同是hasMag还是为true
}
if(hasMag){
var rowsDisplayed = 10; //查询历史消息每次多加载十条数据
//加载更多 //onclick=\"getHistory("+targetIdPar+","+null+","+20+")\"
targetIdPar = "'"+targetIdPar+"'";
var jzgd = "<li class='jzgd' onclick=\"getHistory("+targetIdPar+","+rowsDisplayed+","+1+")\" style='text-align: center;font-size: 16px;color:#4EA9E9'>查看更多消息</li>";
$(".content").prepend(jzgd);
}
},conversationType,targetId, timestrap, count);
}
/**
* 清空消息数 要清空必须得
* 在这个页面获取一下历史消息才能永久成功
*/
function closeMessageCount(closeId) {
var rongCloud = new RongCloud();
rongCloud.getHistoryById(function (hasMag, list) {
//清空数据
rongCloud.cleanMessageCount(localStorage.getItem("closeId"));
},RongIMLib.ConversationType.PRIVATE,localStorage.getItem("closeId"), null, 20);
}
/**
* 跳转到会话页面
*/
function jump(){
window.location.href = "/mobile/wx_chat/conversationPage";
}
</script>
解释一下1.封装的融云js文件中有个地方依赖这个页面（就是之前提到的监听消息的那段） 如果监听到有消息那么就调用这个页面的写入方法----writeInContent
2.?targetId=971b90fa-bcce-48bb-864c-79c784889e1d&count=0 通过控制器跳转的时候要传两个参数一 targetId：你要查询你和谁的聊天 count：第一次你要查询几条消息
会话页面和聊天页面只能作为参照复制无效！希望能帮到你，或者你能帮到我！