Skip to content

GitLab

Commit a30efe08 authored by Alvaro Machicado's avatar Alvaro Machicado
Browse files

rehabilitando chat publico

parent 86f34cc4
Hide whitespace changes
Inline Side-by-side
Showing with 72 additions and 38 deletions
tp1/public/components/login/login.component.js
View file @ a30efe08
angular.module('myApp')
.controller('loginController', ['$scope', 'socket', function($scope, socket) {
var vm = this;
vm.login = function () {
vm.user.nickName = vm.user.nickName.trim();
if (vm.user.nickName != '')
socket.emit('login', vm.user)
}
socket.on('login success', function(user){
vm.isLogged = true;
vm.user = user;
})
}])
.directive('userLogin', function() {
return {
restrict: 'E',
bindToController: true,
bindToController: true,
controller: 'loginController',
controllerAs: 'loginCtrl',
scope: {
user: '=',
isLogged: '=',
socket: '='
},
},
templateUrl: 'components/login/user-login.html'
};
});
tp1/public/index.js
View file @ a30efe08
......@@ -13,14 +13,6 @@ app.directive("filesInput", function() {
}
});
//app.service('socketService', function() {
// var vm = this;
// vm.socket = io.connect();
// this.login = function (user) {
// return x.toString(16);
// }
//});
app.service('socket', ['$rootScope', function ($rootScope) {
var socket = io.connect();
......@@ -57,45 +49,55 @@ app.service('socket', ['$rootScope', function ($rootScope) {
}]);
app.controller('mainController',['$sce', 'socket' ,function($sce, socket){
app.controller('mainController',['$scope','$sce', 'socket' ,function($scope, $sce, socket){
var vm = this;
vm.user = { nickName: 'Pablo' };
vm.isLogged = false;
vm.currentContactId = null;
vm.currentMessage = ""
vm.currentMessage = "";
vm.fileToSend = "";
vm.groupInbox = {};
vm.privateInbox = {};
vm.currentContact = function(){
return vm.contacts && vm.contacts.filter(item => item.id == vm.currentContactId)[0];
};
vm.currentContactMessages = function(){
return vm.privateInbox[vm.currentContactId];
}
socket.on('contact list', function(contacts){
if (vm.isLogged) {
vm.contacts = contacts.filter(item => item.id != vm.user.id);
vm.privateInbox = {};
contacts.forEach(function(contact){
vm.privateInbox[contact.id] = [];
});
vm.currentContactId = vm.currentContact() && vm.currentContact().id
//vm.$apply()
}
})
vm.selectContact = function(contactId){
vm.currentContactId = contactId
vm.currentContactId = contactId;
}
vm.sendMessage = function(){
if (vm.currentMessage != ""){
vm.currentContact().messages.push({from: vm.user.id, text: vm.currentMessage})
if (vm.currentMessage !== ""){
//vm.currentContact().messages.push({from: vm.user.id, text: vm.currentMessage})
vm.privateInbox[vm.currentContactId].push({from: vm.user.id, text: vm.currentMessage});
var data = {to: vm.currentContactId, text: vm.currentMessage };
socket.emit('send message', data)
vm.currentMessage = ""
$scope.$apply();
socket.emit('send message', data);
vm.currentMessage = "";
}
}
socket.on('receive message', function(data){
vm.contacts.filter(item => item.id == data.from)[0].messages.push({from: data.from, text: data.text, type: 'message'})
//vm.contacts.filter(item => item.id == data.from)[0].messages.push({from: data.from, text: data.text, type: 'message'})
vm.privateInbox[data.from].push({from: data.from, text: data.text, type: 'message'});
})
vm.sendFile = function(){
var type = "audio";
if (vm.fileToSend[0].type.includes("image"))
......@@ -106,9 +108,9 @@ app.controller('mainController',['$sce', 'socket' ,function($sce, socket){
socket.emit('send file', dataToSend);
}
reader.readAsDataURL(vm.fileToSend[0]);
}
socket.on('receive file', function(data){
vm.contacts.filter(item => item.id == data.from)[0].messages.push({from: data.from, text: $sce.trustAsResourceUrl(data.file), type: data.type})
})
......
tp1/server.js
View file @ a30efe08
......@@ -12,6 +12,14 @@ app.get('/', function(req, res){
});
var users = {}
var groups = {}
var publicRoomName = 'publicRoom';
groups[publicRoomName] = {
id: publicRoomName,
avatar: "http://ssl.gstatic.com/accounts/ui/avatar_2x.png",
messages: []
};
var avatars = [
"http://emilcarlsson.se/assets/mikeross.png",
"http://emilcarlsson.se/assets/jonathansidwell.png",
......@@ -26,33 +34,52 @@ var avatars = [
]
function broadcastContacts(){
contacts = Object.keys(io.sockets.connected).map(item => users[item]).filter(item => item)
contacts = Object.keys(io.sockets.connected).map(item => users[item]).filter(item => item);
io.emit('contact list', contacts);
}
function broadcastGroups(){
groupsData = Object.values(groups);
io.emit('group list', groupsData);
}
function subscribeToGroups(subscriberSocket){
Object.keys(groups).forEach(function(groupIdentifier){
subscriberSocket.join(groupIdentifier);
});
}
io.on('connection', function(socket){
console.log('user connected');
socket.on('login', function(user){
user.id = socket.id;
user.avatar = avatars.shift();
user.messages = [];
users[socket.id] = user;
socket.emit('login success', user);
console.log('user ' + user.nickName + ' logged');
broadcastContacts();
subscribeToGroups(socket);
broadcastGroups();
});
socket.on('disconnect', function(){
if (users[socket.id]){
console.log('user ' + users[socket.id].nickName + ' logged out');
avatars.push(users[socket.id].avatar);
delete users[socket.id];
}
console.log('user disconnected');
broadcastContacts();
});
socket.on('send message', function(data){
var dataToSend = { from: socket.id, text: data.text };
io.sockets.connected[data.to].emit('receive message', dataToSend)
var dataToSend = { from: socket.id, to: data.to, text: data.text };
//io.sockets.connected[data.to].emit('receive message', dataToSend)
io.to(data.to).emit('receive message', dataToSend);
});
socket.on('send file', function(data){
var dataToSend = { from: socket.id, file: data.file, type: data.type };
io.sockets.connected[data.to].emit('receive file', dataToSend)
var dataToSend = { from: socket.id,to: data.to, file: data.file, type: data.type };
//io.sockets.connected[data.to].emit('receive file', dataToSend)
io.to(data.to).emit('receive file', dataToSend)
});
})
......
tp1/views/index.html
View file @ a30efe08
......@@ -4,10 +4,10 @@
<title>Arquitectura Web</title>
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">
<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="css/login.css">
......@@ -22,7 +22,6 @@
<div ng-hide="mainCtrl.isLogged" class="container">
<user-login is-logged="mainCtrl.isLogged" user="mainCtrl.user" ></user-login>
</div>
<div ng-if="mainCtrl.isLogged" id="frame">
<div id="sidepanel">
<div id="profile">
......@@ -33,6 +32,16 @@
</div>
<div id="contacts">
<ul>
<li ng-click="mainCtrl.selectPublicRoom()" class="contact">
<div class="wrap">
<span class="contact-status online"></span>
<img src="//ssl.gstatic.com/accounts/ui/avatar_2x.png" alt="">
<div class="meta">
<p class="name">Sala Pública</p>
<p class="preview" ng-model="mainCtrl.lastMessageReceived"></p>
</div>
</div>
</li>
<li ng-repeat="contact in mainCtrl.contacts" ng-click="mainCtrl.selectContact(contact.id)" class="contact">
<div class="wrap">
<span class="contact-status online"></span>
......@@ -53,7 +62,7 @@
</div>
<div class="messages">
<ul>
<div ng-repeat="message in mainCtrl.currentContact().messages">
<div ng-repeat="message in mainCtrl.currentContactMessages()">
<li ng-class="(message.from==currentUser.id) ? 'sent' : 'replies'">
<img src="{{mainCtrl.contacts[message.from].avatar}}" alt="">
<p ng-if="message.type=='message'">{{message.text}}</p>
......@@ -87,7 +96,5 @@
</div>
</div>
</div>
</body>
</html>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment