goeasy
This commit is contained in:
parent
2ec14481fd
commit
bd996de410
GPG Key ID:
A7972FD973317FF3
@ -74,14 +74,15 @@ export default {
|
||||
methods:{
|
||||
zhibo(){
|
||||
this.$u.route({
|
||||
url:"/pageB/zhibo/index",
|
||||
url:"/pages/zhibo/index",
|
||||
params:{
|
||||
url:this.url,
|
||||
id:this.zid
|
||||
id:this.zid,
|
||||
rid:this.rid
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
props:['name','image','url','zid']
|
||||
props:['name','image','url','zid','rid']
|
||||
}
|
||||
</script>
|
||||
15
pages.json
15
pages.json
@ -80,13 +80,7 @@
|
||||
{
|
||||
"root": "pageB",
|
||||
"pages": [
|
||||
{
|
||||
"path": "zhibo/index",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"path": "follow/index",
|
||||
"style": {
|
||||
@ -871,6 +865,13 @@
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/zhibo/index",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
|
||||
@ -39,10 +39,10 @@
|
||||
<u-swiper mode="dot" :list="zhiboImageSwiper" name="adv_code" @click="clickSImage($event, 2)"></u-swiper>
|
||||
<view class="list">
|
||||
<view>
|
||||
<zhiboItem v-for="item in tabLiveLists.filter((_, index) => !(index&1))" :zid="item.live_id" :key="item.live_id" :name="item.store_name" :image="item.cover_img" :url="item.url"></zhiboItem>
|
||||
<zhiboItem v-for="item in tabLiveLists.filter((_, index) => !(index&1))" :zid="item.live_id" :rid="item.chatroom_id" :key="item.live_id" :name="item.store_name" :image="item.cover_img" :url="item.url"></zhiboItem>
|
||||
</view>
|
||||
<view style="margin-left:20rpx">
|
||||
<zhiboItem v-for="item in tabLiveLists.filter((_, index) => index&1)" :zid="item.live_id" :key="item.live_id" :name="item.store_name" :image="item.cover_img" :url="item.url"></zhiboItem>
|
||||
<zhiboItem v-for="item in tabLiveLists.filter((_, index) => index&1)" :zid="item.live_id" :rid="item.chatroom_id" :key="item.live_id" :name="item.store_name" :image="item.cover_img" :url="item.url"></zhiboItem>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -21,7 +21,23 @@
|
||||
<image class="cart" src="../../static/cart.png" @click="show = true">
|
||||
|
||||
</image>
|
||||
<view class="danmufasongbox" @click="danmu = true">
|
||||
<view class="danmufasongboxback"></view>
|
||||
<image src="../../static/danmu.png" class="danmubianji"></image>
|
||||
<text style="font-size:26rpx;color:#fff;margin-left:20rpx">想说点什么</text>
|
||||
</view>
|
||||
<image class="liketap" src="../../static/like.png" @click="">
|
||||
|
||||
<view class="danmuinputbox" v-if="danmu">
|
||||
<input type="text" focus="true" style="width:600rpx;margin-left:30rpx;font-size:26rpx" maxlength="20" @blur="danmu=false" v-model="danmutext">
|
||||
<view class="danmufasong" @click="sendMessage(room.MessageType.CHAT,danmutext)">
|
||||
<text style="font-size:24rpx;color:#fff">发送</text>
|
||||
</view>
|
||||
</view>
|
||||
<div class="danmulist">
|
||||
<text class="danmuitem" v-for="(i,j) in danmulist" :key="j">{{i.senderNickname}}:{{i.content}}</text>
|
||||
|
||||
</div>
|
||||
<image class="closeimg" src="../../static/close.png" :style="{'top': top + 30 * rpx}" @click="back"></image>
|
||||
</image>
|
||||
<div class="bottom" :style="{'height':height + 'px'}" v-if="show" @click="show = false">
|
||||
@ -242,8 +258,62 @@
|
||||
right: 31rpx;
|
||||
background-color: #0f0;
|
||||
}
|
||||
.danmufasongbox{
|
||||
width: 308rpx;
|
||||
height: 58rpx;
|
||||
position: fixed;
|
||||
left: 30rpx;
|
||||
bottom: 30rpx;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.danmufasongboxback{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 308rpx;
|
||||
height: 58rpx;
|
||||
background-color: #0f0;
|
||||
opacity: 0.4;
|
||||
border-radius: 29rpx;
|
||||
}
|
||||
.danmubianji{
|
||||
width: 27rpx;
|
||||
height: 32rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
.danmuinputbox{
|
||||
position: fixed;
|
||||
bottom:0;
|
||||
height: 100rpx;
|
||||
width: 750rpx;
|
||||
z-index: 9999;
|
||||
background-color: #fff;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
.danmufasong{
|
||||
width: 85rpx;
|
||||
height: 51rpx;
|
||||
background-color: #FF780F;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 5rpx;
|
||||
}
|
||||
.danmulist{
|
||||
position: fixed;
|
||||
left: 30rpx;
|
||||
bottom: 118rpx;
|
||||
}
|
||||
.danmuitem{
|
||||
font-size: 26rpx;
|
||||
color: #fff;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
const ChatRoomService =require('../../static/chatservice');
|
||||
export default {
|
||||
name: "zhibo",
|
||||
data() {
|
||||
@ -255,7 +325,12 @@ export default {
|
||||
show:false,
|
||||
list:[],
|
||||
id:0,
|
||||
info:{}
|
||||
info:{},
|
||||
danmutext:"",
|
||||
danmu:false,
|
||||
room:{},
|
||||
chatRoomService:{},
|
||||
danmulist:[]
|
||||
};
|
||||
},
|
||||
onLoad(a) {
|
||||
@ -323,8 +398,62 @@ export default {
|
||||
// that.list= res.data.data
|
||||
}
|
||||
})
|
||||
//当前用户
|
||||
uni.request({
|
||||
url:"https://dmmall.sdbairui.com/api/Member/MemberInfo",
|
||||
method:"POST",
|
||||
header:{
|
||||
'Authorization' : 'Bearer' + " " + token
|
||||
},
|
||||
success(res){
|
||||
console.log(res,111)
|
||||
var currentUser = {
|
||||
id : "12",
|
||||
nickname :"123",
|
||||
avatar: "1223"
|
||||
};
|
||||
|
||||
var room = {
|
||||
id : a.rid + "",
|
||||
name : a.rid + ""
|
||||
};
|
||||
console.log(room,currentUser)
|
||||
//构造chatRoomService
|
||||
that.chatRoomService = new ChatRoomService(room, currentUser);
|
||||
that.chatRoomService.initialWhenNewMessage(that.whenNewMessage);
|
||||
that.chatRoomService.connectGoEasyIM();
|
||||
|
||||
//获取当前聊天室数据
|
||||
that.room = that.chatRoomService.room;
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
methods:{
|
||||
sendMessage (messageType, content) {//发送消息
|
||||
console.log(123)
|
||||
if(content == "" && messageType == 0) return;
|
||||
var message = {
|
||||
senderNickname : this.room.currentUser.nickname ,
|
||||
type : messageType,
|
||||
content : content
|
||||
}
|
||||
this.chatRoomService.sendMessages(this.room.id, message);
|
||||
this.danmutext = ""
|
||||
},
|
||||
whenNewMessage (message) {//新消息监听
|
||||
// if(message.type == this.room.MessageType.PROP){
|
||||
// this.propAnimation(parseInt(message.content))
|
||||
// }
|
||||
// setTimeout(() => {
|
||||
// this.contentPosition = 'message-box'+(this.room.messages.length-1);
|
||||
// }, 300)
|
||||
console.log(message)
|
||||
this.danmulist.push(message)
|
||||
if(this.danmulist.length > 7){
|
||||
this.danmulist = this.danmulist.slice(this.danmulist.length - 7)
|
||||
}
|
||||
},
|
||||
back(){
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
276
static/chatservice.js
Normal file
276
static/chatservice.js
Normal file
@ -0,0 +1,276 @@
|
||||
/*
|
||||
* @Author: jack.lu
|
||||
* @Date: 2020-4-21 10:10:20
|
||||
* @Last Modified by: jack.lu
|
||||
* @Last Modified time: 2020-4-21 15:01:41
|
||||
*/
|
||||
|
||||
|
||||
import GoEasyIM from './goeasy-im-1.0.9.js'
|
||||
|
||||
//用户
|
||||
function User(id, nickname, avatar) {
|
||||
this.id = id;
|
||||
this.nickname = nickname;
|
||||
this.avatar = avatar;
|
||||
}
|
||||
|
||||
//消息
|
||||
function Message(senderUserId, senderNickname, content, type) {
|
||||
this.senderNickname = senderNickname;
|
||||
this.senderUserId = senderUserId;
|
||||
this.content = content;
|
||||
this.type = type
|
||||
}
|
||||
|
||||
//聊天室
|
||||
function Room(id, name, currentUser) {
|
||||
|
||||
this.id = id;
|
||||
this.name = name;
|
||||
this.currentUser = currentUser;
|
||||
|
||||
this.onlineUsers = {
|
||||
count: 0,
|
||||
users: []
|
||||
};
|
||||
|
||||
this.messages = [];
|
||||
|
||||
this.MessageType = {
|
||||
CHAT: 0,//文字聊天
|
||||
PROP: 1//道具
|
||||
};
|
||||
|
||||
this.Prop = {
|
||||
HEART: 0,//桃心
|
||||
ROCKET: 1//火箭
|
||||
};
|
||||
}
|
||||
|
||||
function ChatRoomService(room, user) {
|
||||
this.room = new Room(room.id, room.name, user);
|
||||
this.whenNewMessage = function () {
|
||||
|
||||
};
|
||||
this.whenOnlineUserChange = function () {
|
||||
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
//获取实例
|
||||
ChatRoomService.prototype.connectGoEasyIM = function () {
|
||||
this.im = GoEasyIM.getInstance({
|
||||
appkey: 'BC-453aa755c4ea48148abefc55a86df283',
|
||||
host: 'hangzhou.goeasy.io'
|
||||
});
|
||||
|
||||
//监听网络连接成功
|
||||
this.im.on(GoEasyIM.EVENT.CONNECTED, () => {
|
||||
console.log('GoEasyIM网络连接成功');
|
||||
//连接成功后，更新在线用户数和用户头像
|
||||
this.initialOnlineUsers(this.room.id);
|
||||
});
|
||||
|
||||
//监听网络连接断开
|
||||
this.im.on(GoEasyIM.EVENT.DISCONNECTED, () => {
|
||||
console.log('GoEasyIM网络断开')
|
||||
});
|
||||
|
||||
//监听上下线提醒
|
||||
this.listenerGroupPresence();
|
||||
|
||||
//监听新消息
|
||||
this.listenerNewMessage();
|
||||
|
||||
var currentUser = this.room.currentUser;
|
||||
//连接GoEasyIM
|
||||
this.im.connect({
|
||||
id: currentUser.id,
|
||||
data: {
|
||||
avatar: currentUser.avatar,
|
||||
nickname: currentUser.nickname
|
||||
}
|
||||
}).then(() => {
|
||||
console.log('连接成功');
|
||||
this.initialChatHistory(this.room.id);
|
||||
|
||||
//订阅用户上下线事件
|
||||
this.subscribePresence(this.room.id);
|
||||
//订阅聊天室消息
|
||||
this.subscribeRoomMessage(this.room.id);
|
||||
|
||||
|
||||
}).catch(e => {
|
||||
console.log(e);
|
||||
console.log('连接失败');
|
||||
});
|
||||
};
|
||||
|
||||
ChatRoomService.prototype.initialWhenNewMessage = function (whenNewMessage) {
|
||||
this.whenNewMessage = whenNewMessage;
|
||||
};
|
||||
|
||||
ChatRoomService.prototype.initialWhenOnlineUserChange = function (whenOnlineUserChange) {
|
||||
this.whenOnlineUserChange = whenOnlineUserChange;
|
||||
};
|
||||
|
||||
|
||||
//监听新消息
|
||||
ChatRoomService.prototype.listenerNewMessage = function () {
|
||||
|
||||
this.im.on(GoEasyIM.EVENT.GROUP_MESSAGE_RECEIVED, (message) => {
|
||||
var content = JSON.parse(message.payload.text);
|
||||
this.addNewMessage(message);
|
||||
this.whenNewMessage(content);
|
||||
})
|
||||
}
|
||||
|
||||
ChatRoomService.prototype.addNewMessage = function (message) {
|
||||
var content = JSON.parse(message.payload.text);
|
||||
let messageContent = "";
|
||||
//聊天消息
|
||||
if (content.type == this.room.MessageType.CHAT) {
|
||||
messageContent = content.content;
|
||||
}
|
||||
//道具消息
|
||||
if (content.type == this.room.MessageType.PROP) {
|
||||
if (content.content == this.room.Prop.ROCKET) {
|
||||
messageContent = "送出了一枚大火箭";
|
||||
}
|
||||
if (content.content == this.room.Prop.HEART) {
|
||||
messageContent = "送出了一个大大的比心";
|
||||
}
|
||||
}
|
||||
//添加消息
|
||||
let newMessage = new Message(message.senderId, content.senderNickname, messageContent);
|
||||
this.room.messages.push(newMessage);
|
||||
};
|
||||
|
||||
//监听用户上下线
|
||||
ChatRoomService.prototype.listenerGroupPresence = function () {
|
||||
this.im.on(GoEasyIM.EVENT.GROUP_PRESENCE, (event) => {
|
||||
//更新在线用户数
|
||||
this.room.onlineUsers.count = event.groupOnlineCount;
|
||||
|
||||
if (event.action == 'join' || event.action == 'online') {
|
||||
let userData = JSON.parse(event.userData);
|
||||
//添加新用户
|
||||
let user = new User(event.userId, userData.nickname, userData.avatar);
|
||||
|
||||
//添加在线用户，避免用户重复
|
||||
if (!this.room.onlineUsers.users.find(item => item.id == event.userId)) {
|
||||
this.room.onlineUsers.users.push(user);
|
||||
}
|
||||
|
||||
//添加进入房间的消息
|
||||
let message = new Message(event.userId, userData.nickname, " 进入房间", this.room.MessageType.CHAT);
|
||||
this.room.messages.push(message);
|
||||
} else {
|
||||
let offlineUserIndex = this.room.onlineUsers.users.findIndex(item => item.id == event.userId);
|
||||
if (offlineUserIndex > -1) {
|
||||
//将离开的用户从onlineUsers中删掉
|
||||
let offlineUser = Object.assign(this.room.onlineUsers.users[offlineUserIndex]);
|
||||
this.room.onlineUsers.users.splice(offlineUserIndex, 1);
|
||||
//添加离开消息
|
||||
let message = new Message(offlineUser.id, offlineUser.nickname, " 离开房间", this.room.MessageType.CHAT)
|
||||
this.room.messages.push(message);
|
||||
}
|
||||
}
|
||||
this.whenOnlineUserChange(this.room.onlineUsers);
|
||||
})
|
||||
};
|
||||
|
||||
//查询和初始化在线用户列表和在线用户数
|
||||
ChatRoomService.prototype.initialOnlineUsers = function (roomId) {
|
||||
let self = this;
|
||||
|
||||
//查询最新上线的用户列表
|
||||
this.im.groupHereNow(roomId)
|
||||
.then(result => {
|
||||
if (result.code == 200) {
|
||||
let users = [];
|
||||
result.content && result.content.map(function (onlineUser) {
|
||||
let userData = JSON.parse(onlineUser.userData);
|
||||
let user = new User(onlineUser.userId, userData.nickname, userData.avatar);
|
||||
users.push(user);
|
||||
});
|
||||
self.room.onlineUsers = {
|
||||
users: users
|
||||
};
|
||||
}
|
||||
}).catch(e => {
|
||||
if (e.code == 401) {
|
||||
console.log("您还没有开通用户在线状态提醒，登录goeasy->我的应用->查看详情->高级功能，自助开通.");
|
||||
} else {
|
||||
console.log(e);
|
||||
}
|
||||
});
|
||||
//获取聊天室在线用户数
|
||||
this.im.groupOnlineCount(roomId)
|
||||
.then(result => {
|
||||
this.room.onlineUsers.count = result.content.onlineCount;
|
||||
}).catch(e => {
|
||||
console.log(e)
|
||||
})
|
||||
};
|
||||
|
||||
//订阅聊天室成员上下线
|
||||
ChatRoomService.prototype.subscribePresence = function (roomId) {
|
||||
this.im.subscribeGroupPresence([roomId])
|
||||
.then(() => {
|
||||
console.log('成员上下线订阅成功')
|
||||
}).catch(e => {
|
||||
console.log(e)
|
||||
})
|
||||
}
|
||||
|
||||
//订阅聊天室消息
|
||||
ChatRoomService.prototype.subscribeRoomMessage = function (roomId) {
|
||||
this.im.subscribeGroup([roomId])
|
||||
.then(result => {
|
||||
console.log('消息订阅成功')
|
||||
}).catch(e => {
|
||||
console.log(e)
|
||||
})
|
||||
}
|
||||
|
||||
//历史消息
|
||||
ChatRoomService.prototype.initialChatHistory = function (roomId) {
|
||||
var self = this;
|
||||
this.im.history({
|
||||
groupId: roomId
|
||||
}).then(res => {
|
||||
res.content.forEach(function (message) {
|
||||
self.addNewMessage(message);
|
||||
})
|
||||
}).catch(function (error) {
|
||||
if (error.code == 401) {
|
||||
console.log("您还没有开通历史消息的权限，登录goeasy->我的应用->查看详情->高级功能，自助开通.");
|
||||
} else {
|
||||
console.log(error);
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
//发送消息
|
||||
ChatRoomService.prototype.sendMessages = function (roomId, content) {
|
||||
var contentMessage = {
|
||||
text: JSON.stringify(content)
|
||||
};
|
||||
let message = this.im.createTextMessage(contentMessage);
|
||||
this.im.sendGroupMessage(roomId, message)
|
||||
.then(() => {
|
||||
console.log('消息发送成功')
|
||||
}).catch(e => {
|
||||
console.log(e);
|
||||
})
|
||||
};
|
||||
|
||||
//退出聊天室
|
||||
ChatRoomService.prototype.quitRoom = function (roomId) {
|
||||
this.im.disconnect()
|
||||
};
|
||||
|
||||
module.exports = ChatRoomService;
|
||||
BIN
static/danmu.png
Normal file
BIN
static/danmu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
2
static/goeasy-im-1.0.9.js
Normal file
2
static/goeasy-im-1.0.9.js
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user