zoukankan      html  css  js  c++  java
  • 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'
            }
    
        })
  • 相关阅读:
    linq判断集合是否为空的方法
    MVC控制器取参数值
    linq查询结果转换为指定字段类型的list集合
    C#Web异步操作封装
    js基础细节
    写入临时日志到文本
    css3超过指定宽度文字,显示省略号
    如何判断Javascript对象是否存在
    chrome下input[type=text]的placeholder不垂直居中的问题解决
    sqlserver临时表操作
  • 原文地址:https://www.cnblogs.com/y8932809/p/6225250.html
Copyright © 2011-2022 走看看