Rongyun WEB（PC）端 聊天部分 可發佈文本和圖片，可顯示Emoji表情
<include file="public@head"/>
</head>
<body>
<style type="text/css">
*, *:before, *:after {
box-sizing: border-box;
}
.li{
padding: 10px;
}
.li .userImg img{
border-radius: 50%;
width: 30px;
height: 30px;
margin-bottom: 10px;
}
.li img {
width: 200px;
}
.chat{
width: 800px;
margin: auto;
overflow: auto;
box-shadow: 0 0 6px 0 #ccc;
}
.aside{
color: #f4f4f4;
background-color: #2e3238;
padding: 20px;
height: 600px;
padding: 0;
}
.aside header{
/*height: 40px*/
padding: 0;
}
.aside header img,.item img{
border-radius: 100%;
/*width: 80px;*/
height: 40px;
width: 40px;
padding: 0;
margin: 0;
}
.aside_top{
margin: 20px;
}
.aside .avatar{
vertical-align: middle;
}
.active{
background-color: hsla(0,0%,100%,.1);
}
.item{
padding: 9pt 15px;
border-bottom: 1px solid #292c33;
}
.message{
position: relative;
overflow: hidden;
background-color: #eee;
height: 600px;
padding: 0;
}
.message_list{
padding: 10px 15px;
overflow-y: scroll;
height: calc(100% - 128px);
}
.message_text{
position: absolute;
width: 100%;
bottom: 0;
left: 0;
height: 8pc;
border-top: 1px solid #ddd;
}
.message_text textarea {
padding: 10px;
height: calc(100% - 28px);
width: 100%;
border: none;
outline: 0;
font-family: Micrsofot Yahei;
resize: none;
}
.li_left{
}
.li_right{
text-align: right;
}
.info{
display: inline-block;
position: relative;
padding: 0 10px;
max-width: calc(100% - 40px);
min-height: 30px;
line-height: 2.5;
font-size: 9pt;
text-align: left;
word-break: break-all;
background-color: #fafafa;
border-radius: 4px;
}
.message_text button{
position: absolute;
right: 0;
bottom: 0;
width: 96px;
}
.flex-y-center {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
}
.send-time {
margin-left: 10px;
}
.message_text_column{
height: 28px;
line-height: 28px;
background: #fcfcfc;
}
.message_text_column img{
width: 20px;
height: 20px;
margin-left: 10px;
}
.file-btn{
position: absolute;
/* width: 100%; */
/* height: 100%; */
/* top: 0; */
width: 20px;
margin-left: 10px;
left: 0;
outline: none;
background-color: transparent;
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
}
</style>
<div class="wrap js-check-wrap" id="app">
<div class="chat row">
<div class="aside col-xs-3">
<div class="aside_top tow">
<header class="col-xs-12">
<img class="col-xs-4 avatar" :src="my_avatar.avatar">
<div class="col-xs-8">{{my_avatar.user_nickname}}</div>
</header>
</div>
<div class="item col-xs-12 flex-y-center" v-for="(vo,index) in tabs_list" :class="tab == index ? 'active' : ''" @click="tabs(vo.user_id,index)">
<img class="col-xs-4" :src="vo.avatar">
<div class="col-xs-8">{{vo.user_nickname}}</div>
</div>
</div>
<div class="message col-xs-9">
<div class="message_list">
<div class="li row" v-for="(vo,index) in message_list" :class="vo.senderUserId == my_avatar.id ? 'li_right' : 'li_left'">
<div class="userImg">
<img v-if="vo.senderUserId == my_avatar.id" :src="my_avatar.avatar" />
<img v-else :src="default_avatar"><span class="send-time" v-text="vo.sentTime"></span>
</div>
<div class="info" v-if="vo.messageType == 'TextMessage'" v-text="vo.content"></div>
<img v-if="vo.messageType == 'ImageMessage'" :src="vo.content" />
</div>
</div>
<div class="message_text">
<div class="message_text_column flex-y-center">
<a @click="uploadOneImage2('圖片上傳','')" href="javascript:;">
<img src="__STATIC__/images/message_text_column_img.png"
id="thumbnail-preview"
width="135" style="cursor: pointer"/>
</a>
</div>
<textarea placeholder="按 Enter 發送" v-model="content" @keyup="show($event)"></textarea>
<button type="button" @click="send()" class="btn btn-info">發送</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript" src="__STATIC__/js/admin.js"></script>
<script src="http://cdn.ronghub.com/RongIMLib-2.3.2.min.js"></script>
<script src="https://cdn.ronghub.com/RongEmoji-2.2.7.min.js"></script>
<reference path="__STATIC__/RongIMLib-2.3.2.d.ts">
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
tabs_id:'',
tabs_list:[],
message_list:[],
content:'',
my_avatar:[],
user_id:'',
senderUserId:'',
default_avatar:'',
tab:0
// history:''
},
methods: {
uploadOneImage2:function(dialog_title, input_selector, extra_params, app){
vm.openUploadDialog2(dialog_title, function (dialog, files) {
$(input_selector).val(files[0].filepath);
$(input_selector + '-preview').attr('src', files[0].preview_url);
$(input_selector + '-name').val(files[0].name);
}, extra_params, 0, 'image', app);
},
openUploadDialog2:function(dialog_title, callback, extra_params, multi, filetype, app){
Wind.css('artDialog');
multi = multi ? 1 : 0;
filetype = filetype ? filetype : 'image';
app = app ? app : GV.APP;
var params = '&multi=' + multi + '&filetype=' + filetype + '&app=' + app;
Wind.use("artDialog", "iframeTools", function () {
art.dialog.open(GV.ROOT + 'user/Asset/webuploader?' + params, {
title: dialog_title,
id: new Date().getTime(),
width: '600px',
height: '350px',
lock: true,
fixed: true,
background: "#CCCCCC",
opacity: 0,
ok: function () {
if (typeof callback == 'function') {
var iframewindow = this.iframe.contentWindow;
var files = iframewindow.get_selected_files();
var img_url = 'https://'+document.domain+'/'+files[0].url
vm.sendImg(img_url)
// console.log(img_url)
if (files && files.length > 0) {
callback.apply(this, [this, files, extra_params]);
} else {
return false;
}
}
},
cancel: true
});
});
},
// 消息列表切換
tabs:function(user_id,index){
vm.tab = index;
// console.log(user_id)
vm.senderUserId = user_id
var conversationType = RongIMLib.ConversationType.PRIVATE; //單聊,其餘會話選擇相應的消息類型便可。
var targetId = user_id; // 想獲取本身和誰的歷史消息，targetId 賦值爲對方的 Id。
var timestrap = Date.parse(new Date()); // 默認傳 null，若從頭開始獲取歷史消息，請賦值爲 0 ,timestrap = 0;
var count = 20; // 每次獲取的歷史消息條數，範圍 0-20 條，能夠屢次獲取。
RongIMLib.RongIMClient.getInstance().getHistoryMessages(conversationType, targetId, timestrap, count, {
onSuccess: function(history, hasMsg) {
// console.log(history)
vm.message_list = [];
for(var j=0;j<history.length;j++){
let obj = {};
let date = new Date(history[j].sentTime);
M = date.getMonth() + 1 + '-';
d = date.getDate() + ' ';
h = date.getHours() + ':';
m = date.getMinutes() + ':';
s = date.getSeconds();
date = M+d+h+m+s
obj.senderUserId = history[j].senderUserId
obj.sentTime = date
if(history[j].messageType == 'TextMessage'){
obj.content = RongIMLib.RongIMEmoji.symbolToEmoji(history[j].content.content);
obj.messageType = 'TextMessage'
}else if(history[j].messageType == 'ImageMessage'){
obj.content = history[j].content.imageUri
obj.messageType = 'ImageMessage'
}
// console.log(history[j].content.content);
// console.log(obj.content)
vm.message_list.push(obj);
}
// console.log(vm.message_list)
},
onError: function(error) {
console.log("GetHistoryMessages,errorcode:" + error);
}
});
},
sendImg:function(img_url){
console.log(img_url)
var base64Str = "base64 格式縮略圖";
var imageUri = img_url; // 上傳到本身服務器的 URL。
var msg = new RongIMLib.ImageMessage({content:base64Str,imageUri:imageUri});
var conversationtype = RongIMLib.ConversationType.PRIVATE; // 單聊,其餘會話選擇相應的消息類型便可。
var targetId = vm.senderUserId;
RongIMClient.getInstance().sendMessage(conversationtype, targetId, msg, {
onSuccess: function (message) {
// console.log(message)
//message 爲發送的消息對象而且包含服務器返回的消息惟一Id和發送消息時間戳
let date = new Date(Date.parse(new Date()));
M = date.getMonth() + 1 + '-';
d = date.getDate() + ' ';
h = date.getHours() + ':';
m = date.getMinutes() + ':';
s = date.getSeconds();
date = M+d+h+m+s
var obj = {}
obj.content = message.content.imageUri;
obj.sentTime = date;
obj.senderUserId = vm.my_avatar.id;
obj.messageType = 'ImageMessage'
vm.message_list.push(obj);
vm.content = '';
},
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);
}
});
},
// 獲取消息列表
send:function(){
var msg = new RongIMLib.TextMessage({content:vm.content,extra:"附加信息"});
// console.log(vm.senderUserId);
// console.log(vm.content);
var conversationtype = RongIMLib.ConversationType.PRIVATE; // 單聊,其餘會話選擇相應的消息類型便可。
var targetId = vm.senderUserId; // 目標 Id
RongIMClient.getInstance().sendMessage(conversationtype, targetId, msg, {
onSuccess: function (message) {
//message 爲發送的消息對象而且包含服務器返回的消息惟一Id和發送消息時間戳
let date = new Date(Date.parse(new Date()));
M = date.getMonth() + 1 + '-';
d = date.getDate() + ' ';
h = date.getHours() + ':';
m = date.getMinutes() + ':';
s = date.getSeconds();
date = M+d+h+m+s
var obj = {}
obj.content = message.content.content;
obj.sentTime = date;
obj.senderUserId = vm.my_avatar.id;
obj.messageType = 'TextMessage'
vm.message_list.push(obj);
vm.content = '';
},
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);
}
});
},
show: function (ev) {
var msg = new RongIMLib.TextMessage({content:vm.content,extra:"附加信息"});
// console.log(vm.senderUserId);
// console.log(vm.content)
var conversationtype = RongIMLib.ConversationType.PRIVATE; // 單聊,其餘會話選擇相應的消息類型便可。
var targetId = vm.senderUserId; // 目標 Id
if(ev.keyCode==13){
// alert('你按了回車鍵！')
RongIMClient.getInstance().sendMessage(conversationtype, targetId, msg, {
onSuccess: function (message) {
//message 爲發送的消息對象而且包含服務器返回的消息惟一Id和發送消息時間戳
let date = new Date(Date.parse(new Date()));
M = date.getMonth() + 1 + '-';
d = date.getDate() + ' ';
h = date.getHours() + ':';
m = date.getMinutes() + ':';
s = date.getSeconds();
date = M+d+h+m+s
var obj = {}
obj.content = message.content.content;
obj.sentTime = date;
obj.senderUserId = vm.my_avatar.id;
obj.messageType = 'TextMessage'
vm.message_list.push(obj);
vm.content = '';
},
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);
}
});
}
}
}
})
</script>
<script type="text/javascript">
$(function(){
// 設置鏈接監聽狀態 （ 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.DOMAIN_INCORRECT:
console.log('域名不正確');
break;
case RongIMLib.ConnectionStatus.NETWORK_UNAVAILABLE:
console.log('網絡不可用');
break;
}
}
});
// 消息監聽器
RongIMClient.setOnReceiveMessageListener({
// 接收到的消息
onReceived: function (message) {
// 判斷消息類型
switch(message.messageType){
case RongIMClient.MessageType.TextMessage:
// console.log(message)
var date = new Date(Date.parse(new Date()));
M = date.getMonth() + 1 + ':';
d = date.getDate() + ':';
h = date.getHours() + ':';
m = date.getMinutes() + ':';
s = date.getSeconds();
// console.log(h+m+s);
date = M+d+h+m+s
var obj = {}
obj.content = RongIMLib.RongIMEmoji.symbolToEmoji(message.content.content);
obj.sentTime = date;
obj.senderUserId = message.senderUserId
obj.messageType = 'TextMessage'
vm.message_list.push(obj);
// message.content.content => 消息內容
break;
case RongIMClient.MessageType.VoiceMessage:
// 對聲音進行預加載
// message.content.content 格式爲 AMR 格式的 base64 碼
break;
case RongIMClient.MessageType.ImageMessage:
var date = new Date(Date.parse(new Date()));
M = date.getMonth() + 1 + '-';
d = date.getDate() + ' ';
h = date.getHours() + ':';
m = date.getMinutes() + ':';
s = date.getSeconds();
// console.log(h+m+s);
date = M+d+h+m+s
var obj = {}
obj.content = message.content.imageUri;
obj.sentTime = date;
obj.senderUserId = message.senderUserId
obj.messageType = 'ImageMessage'
vm.message_list.push(obj);
// message.content.content => 圖片縮略圖 base64。
// message.content.imageUri => 原圖 URL。
break;
case RongIMClient.MessageType.DiscussionNotificationMessage:
// message.content.extension => 討論組中的人員。
break;
case RongIMClient.MessageType.LocationMessage:
// message.content.latiude => 緯度。
// message.content.longitude => 經度。
// message.content.content => 位置圖片 base64。
break;
case RongIMClient.MessageType.RichContentMessage:
// message.content.content => 文本消息內容。
// message.content.imageUri => 圖片 base64。
// message.content.url => 原圖 URL。
break;
case RongIMClient.MessageType.InformationNotificationMessage:
// do something...
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;
default:
// do something...
}
}
});
$.ajax({
type:'GET',
url:"{:url('app/Others/get_my_avatar')}",
data:{
},
success:function(ret){
var res = JSON.parse(ret);
// console.log(ret)
vm.my_avatar = res;
}
});
// ***** 鏈接Rongyun必須在執行 RongIMLib.RongIMClient.init(appkey); 以後，而且全部除監聽之外的方法都必須在 connect成功以後 再調用。 ****
//從服務器請求 appkey 和 token
//執行 RongIMLib.RongIMClient.init(appkey);
$.ajax({
type:'POST',
url:"{:url('app/Others/get_token')}",
data:{
},
success:function(ret){
var obj = JSON.parse(ret);
var token = obj.token;
var userIdList = [];
RongIMLib.RongIMClient.init(obj.appkey);
//鏈接服務器
RongIMClient.connect(token, {
onSuccess: function(userId) {
//獲取會話列表
RongIMClient.getInstance().getConversationList({
onSuccess: function(list) {
// list => 會話列表集合。
// console.log(list[0].latestMessage.content.content);
vm.current_message_list =list
var conversationType = RongIMLib.ConversationType.PRIVATE; //單聊,其餘會話選擇相應的消息類型便可。
var targetId = list[0].targetId; // 想獲取本身和誰的歷史消息，targetId 賦值爲對方的 Id。
var timestrap = null; // 默認傳 null，若從頭開始獲取歷史消息，請賦值爲 0 ,timestrap = 0;
var count = 20; // 每次獲取的歷史消息條數，範圍 0-20 條，能夠屢次獲取。
RongIMLib.RongIMClient.getInstance().getHistoryMessages(conversationType, targetId, timestrap, count, {
onSuccess: function(history, hasMsg) {
// console.log(history)
for(var j=0;j<history.length;j++){
let obj = {};
let date = new Date(history[j].sentTime);
M = date.getMonth() + 1 + '-';
d = date.getDate() + ' ';
h = date.getHours() + ':';
m = date.getMinutes() + ':';
s = date.getSeconds();
date = M+d+h+m+s
obj.senderUserId = history[j].senderUserId
obj.sentTime = date
if(history[j].messageType == 'TextMessage'){
obj.content = RongIMLib.RongIMEmoji.symbolToEmoji(history[j].content.content);
obj.messageType = 'TextMessage'
}else if(history[j].messageType == 'ImageMessage'){
obj.content = history[j].content.imageUri
obj.messageType = 'ImageMessage'
}
vm.message_list.push(obj);
}
},
onError: function(error) {
console.log("GetHistoryMessages,errorcode:" + error);
}
});
for(var i=0;i<list.length;i++){
var targetId = list[i].targetId; // 想獲取本身和誰的歷史消息，targetId 賦值爲對方的 Id。
userIdList.push(targetId)
}
$.ajax({
type:'POST',
url:"{:url('app/Others/get_user_avatar_list')}",
data:{
userIdList:userIdList
},
success:function(ret){
var res = JSON.parse(ret);
vm.tabs_list=res;
vm.default_avatar = res[0].avatar;
vm.senderUserId = res[0].user_id;
}
});
},
onError: function(error) {
// do something...
}
},null);
},
onTokenIncorrect: function() {
console.log('token無效');
},
onError:function(errorCode){
var info = '';
switch (errorCode) {
case RongIMLib.ErrorCode.TIMEOUT:
info = '超時';
break;
case RongIMLib.ConnectionState.UNACCEPTABLE_PAROTOCOL_VERSION:
info = '不可接受的協議版本';
break;
case RongIMLib.ConnectionState.IDENTIFIER_REJECTED:
info = 'appkey不正確';
break;
case RongIMLib.ConnectionState.SERVER_UNAVAILABLE:
info = '服務器不可用';
break;
}
console.log(errorCode);
}
});
//Emoji 初始化
RongIMLib.RongIMEmoji.init();
//獲取 Emoji 列表
var list = RongIMLib.RongIMEmoji.list;
// console.log(list);
},
error:function(v){
console.log(JSON.stringify(v));
}
});
});
</script>
</body>
</html>
相關文章
- 1. 聊天窗口中表情，圖片，文件的顯示處理
- 2. emoji表情在web html上顯示
- 3. web前端emoji表情
- 4. 解析emoji表情以及顯示emoji表情
- 5. 關於emoji表情，支持在app端發送web端顯示，web端發送給app端顯示，web與wap端互相顯示。
- 6. 網頁怎麼顯示emoji表情
- 7. Emoji表情在網頁中顯示
- 8. 微信emoji表情存儲與顯示
- 9. 環信聊天，可發圖片和語音2
- 10. 不引入外部文件也可以顯示圖片
- 更多相關文章...
- • Web 品質- 可讀性 - 網站品質教程
- • ASP.NET Web Pages - 發佈網站 - ASP.NET 教程
- • Git可視化極簡易教程 — Git GUI使用方法
- • JDK13 GA發佈：5大特性解讀
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
