直播间的指令有两个文件,分别是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' } })