pages/release/zhibo.nvue

@@ -49,6 +49,10 @@
         <image class="shoptapimg" @click="xianshi" src="../../static/image/shop.png"></image>
         <text style="font-size:26rpx;color:#fff;width:512rpx;position:fixed;left:30rpx;top:793rpx">德铭阳光在线绿色直播，请遵循相关法律法规，警察叔叔24小时巡查哦。为了保障直播系统稳定，现将全局开放防主播沉迷功能。主播积累直播16小时将自动下播休息2小时后方可继续开播。请大家注意休息/避免空播。
         </text>
+        <div class="danmulist">
+            <text class="danmuitem" v-for="(i,j) in danmulist" :key="j">{{i.senderNickname}}:{{i.content}}</text>
+            
+        </div>
         <div class="bottom" :style="{'height':height + 'px'}" v-if="tool" @click="tool = false">
         <view class="menu" @click="zuzhi">
             <view class="menuback"></view>
@@ -252,9 +256,22 @@
     width: 100rpx;
     height: 100rpx;
 }
+.danmulist{
+    position: fixed;
+    left: 30rpx;
+    bottom: 118rpx;
+}
+.danmuitem{
+    font-size: 26rpx;
+    color: #fff;
+    flex-direction: column-reverse;
+}
+.livePusher{
+    width: 750rpx;
+}
 </style>
 <script>
-    const RongIMLib = require('../../static/rongyun.js');
+    const ChatRoomService =require('../../static/chatservice');
     export default {
         data: {
             fil: true,
@@ -268,7 +285,10 @@
             live_id:0,
             tool:false,
             meiyan:0,
-            time:'00:00:00'
+            time:'00:00:00',
+            room:{},
+            chatRoomService:{},
+            danmulist:[]
         },
         onReady() {
             // 注意：需要在onReady中 或 onLoad 延时
@@ -284,6 +304,7 @@
                 }
             })
         },
+        
         onLoad(a){
             this.url = a.url.replace("*","&")
             let that = this
@@ -311,6 +332,26 @@
                 success(res){
                     console.log(res.data)
                     that.info = res.data.data.memberInfo
+                    
+                    console.log(uni.getStorageSync('userinfo'),123)
+                    //当前用户
+                    var currentUser = {
+                        id : res.data.data.memberInfo.member_id + "",
+                        nickname : res.data.data.memberInfo.member_nickname + "",
+                        avatar: res.data.data.memberInfo.member_avatar
+                    };
+
+                    var room = {
+                        id : a.id + "",
+                        name : a.id + ""
+                    };
+                    console.log(room)
+                    //构造chatRoomService
+                    that.chatRoomService = new ChatRoomService(room, currentUser);
+                    that.chatRoomService.initialWhenNewMessage(that.whenNewMessage);
+                    that.chatRoomService.connectGoEasyIM();
+                    //获取当前聊天室数据
+                    that.room = that.chatRoomService.room;
                 }
             })
             let shi = 0;
@@ -321,7 +362,7 @@
                 fen = parseInt(fen)
                 miao = parseInt(miao)
                 miao = miao + 1 
-                console.log(miao)
+                // console.log(miao)
                 if(miao == 60){
                     miao = 0;
                     fen +=1
@@ -341,6 +382,11 @@
                 }
                 that.time = shi + ":" + fen + ":" + miao
             }, 1000);
+            // var roomToken = JSON.parse(options.roomToken);
+	
+
+			// //获取当前聊天室数据
+            // this.room = this.chatRoomService.room;
             // var config = {
             //     appkey: 'mgb7ka1',
             //     debug:true
@@ -387,6 +433,19 @@
 
         },  
         methods: {
+            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)
+                }
+			},
             bindPickerChange(a){
                 console.log(a.detail.value)
                 this.meiyan = a.detail.value

static/chatservice.js

@@ -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;