AngularJS-liveRoomDirective.js 直播间指令

直播间的指令有两个文件，分别是liveRoomByHostDirective.js （主播）和liveRoomByUserDirective.js（用户）两个指令。之前想和到一起，后来觉着这样对以后的扩展会很麻烦。所以暂时区别开。

主播：

/**
 * Created by user on 2016-06-15.
 */

angular.module('liveApp.directives')
    .directive('liveRoomByHost', function ($stateParams,$location,$anchorScroll, socket, userService) {
        return {
            restrict: 'EA',
        
            link: function (scope, element, attrs) {
                scope.sayMessage = []; //为什么必须是对象才能访问到？嵌套指令的作用域
                scope.userInfo = {
                    roomId: $stateParams.roomid
                };
                scope.messages = [];
                var logUser = userService.getUserInfo();
                if (logUser == null) { //如果用户没登录，直接赋值游客身份
                    scope.userInfo.userId = Date.now().toString();
                    scope.userInfo.nickName = '游客_' + Date.now().toString();
                } else {
                    scope.userInfo.userId = logUser._id;
                    scope.userInfo.nickName = logUser.Name;
                }
                //进入房间
                socket.emit('joinRoom', scope.userInfo);

                //获取房间用户列表
                socket.on('userList', function (userList) {
                    scope.userList = userList;
                });

                //获取进入成功的欢迎信息
                socket.on('serverMessage', function (msg) {
                    var msg = {title: '系统消息', msg: msg, time: getLocalHMS()}
                    scope.messages.push(msg);
                });
                //获取其他用户进入房间显示在用户列表中
                socket.on('userJoin', function (userInfo) {
                    scope.userList.push(userInfo);
                });
                //获取其他用户离开房间
                socket.on('userLeave', function (userInfo) {
                    var index = 0;
                    for (var i = 0; i < scope.userList.length; i++) {
                        if (scope.userList[i].socketId == userInfo.socketId) {
                            index = i;
                            break;
                        }
                    }
                    scope.userList.splice(index, 1);
                });
                //获取消息
                socket.on('userSay', function (message) {
                    var msg = {title: message.title, msg: message.msg, time: getLocalHMS()};
                    if (scope.messages.count > 500) { //超过500条清空
                        scope.messages = [];
                    }
                    scope.messages.push(msg);
                });

                //发送消息
                scope.say = function (content) {
                    if (content == "" || content == undefined) {
                        return;
                    }
                    var message = {
                        roomId: scope.userInfo.roomId,
                        content: content
                    }
                    var msg = {title: scope.userInfo.nickName, msg: content, time: getLocalHMS()};
                    scope.messages.push(msg);
                    socket.emit('say', message);
                    scope.sayMessage.msg="";

                    $location.hash('bottom'); //滚动到最下方
                    $anchorScroll();
                }

                function getLocalHMS() {
                    var time = (new Date()).getTime();
                    var d = new Date();
                    return appendZero(d.getHours()) + ":" + appendZero(d.getMinutes()) + ":" + appendZero(d.getSeconds());
                }

                function appendZero(obj) {
                    if (obj < 10) return "0" + "" + obj;
                    else return obj;
                }
            },
            templateUrl: '../components/liveRoomByHost.html'
        }
    })

用户：

/**
 * Created by user on 2016-06-15.
 */
angular.module('liveApp.directives')
    .directive('liveRoomByUser', function ($stateParams,$location,$anchorScroll,$timeout, socket, userService) {
        return {
            restrict: 'EA',
            link: function (scope, element, attrs) {
                scope.userInfo = {
                    roomId: $stateParams.roomid
                };
                scope.messages = [];
                var logUser = userService.getUserInfo();
                if (logUser == null) {
                    scope.userInfo.userId = Date.now().toString();
                    scope.userInfo.nickName = '游客_' + Date.now().toString();
                } else {
                    scope.userInfo.userId = logUser._id;
                    scope.userInfo.nickName = logUser.Name;
                }
                //进入房间
                socket.emit('joinRoom', scope.userInfo);

                //获取房间用户列表
                socket.on('userList', function (userList) {
                    scope.userList = userList;
                });

                //获取进入成功的欢迎信息
                socket.on('serverMessage', function (msg) {
                    var msg = {title: '系统消息', msg: msg, time: getLocalHMS()}
                    scope.messages.push(msg);
                });
                //获取其他用户进入房间显示在用户列表中
                socket.on('userJoin', function (userInfo) {
                    scope.userList.push(userInfo);
                });
                //获取用户离开房间
                socket.on('userLeave', function (userInfo) {
                    var index = 0;
                    for (var i = 0; i < scope.userList.length; i++) {
                        if (scope.userList[i].socketId == userInfo.socketId) {
                            index = i;
                            break;
                        }
                    }
                    scope.userList.splice(index, 1);
                });
                //获取消息
                socket.on('userSay', function (message) {
                    var msg = {title: message.title, msg: message.msg, time: getLocalHMS()};
                    if (scope.messages.count > 500) { //超过500条清空
                        scope.messages = [];
                    }
                    scope.messages.push(msg);

                    $timeout(function () { //延迟100毫米，防止页面未刷新就产生滚动
                        $location.hash('bottom');
                        $anchorScroll();
                    },100);

                });

                function getLocalHMS() {
                    var time = (new Date()).getTime();
                    var d = new Date();
                    return appendZero(d.getHours()) + ":" + appendZero(d.getMinutes()) + ":" + appendZero(d.getSeconds());
                }

                function appendZero(obj) {
                    if (obj < 10) return "0" + "" + obj;
                    else return obj;
                }
            },
            templateUrl: '../components/liveRoomByUser.html'
        }

    })

AngularJS-liveRoomDirective.js 直播间指令

相关推荐