read reciept completed

server/server.js

@@ -24,25 +24,31 @@ http.listen(3000, function(){
 });
 
 // socket.io -public=====================================
+
 io_public = io.of('/public'); // namespace public
 public_usernames = [];
 io_public.on('connection', function(socket){
- socket.on('adduser', function(username){
- socket.username = username;
- public_usernames[username] = username
- socket.room = 'public'; //assign default public room
- socket.join(socket.room);
- // console.log(usernames);
-
- // echo to client they've connected
- socket.emit('server', 'you have connected to a public room');
-
- // echo to public room that a person has connected to their room
- socket.broadcast.to('public').emit('server', '<i>' + socket.username + '</i> has connected to this room');
+
+ socket.on('adduser', function(username){
+
+ socket.username = username;
+ public_usernames[username] = username
+ socket.room = 'public'; //assign default public room
+ socket.join(socket.room);
+ // console.log(public_usernames);
+
+ // echo to client they've connected
+ socket.emit('server', 'you have connected to a public room');
+
+ // echo to public room that a person has connected to their room
+ socket.broadcast.to('public').emit('server', '<i>' + socket.username + '</i> has connected to this room');
+
+
 });
 
 socket.on('sendchat', function (data) {
- // we tell the client to execute 'updatechat' with 2 parameters
+ // we tell the client to execute 'updatechat' with 2 parameters 
+ console.log('server recieve chat');
  io_public.to(socket.room).emit('updatechat', socket.username, data);
 });
 
@@ -55,7 +61,7 @@ socket.on('disconnect', function(){
 
 });
 
- // socket.io -one to one =================================================
+ // socket.io  - private =================================================
 
 io_private = io.of('/private'); // namespace public
 private_rooms = [];
@@ -82,7 +88,6 @@ socket.on('sendchat', function (data) {
 });
 
 socket.on('sendVisibility', function(vis){
- console.log(vis);
  socket.broadcast.to(socket.room).emit('getVisibility', vis)
 })
 socket.on('disconnect', function(){

src/app/app-routing.module.ts

@@ -12,7 +12,7 @@ const routes: Routes = [
 { path: 'login', component: LoginComponent },
 { path: 'dashboard', component: DashboardComponent,
  children: [ // <---- child components declared here
- { path: '', redirectTo: 'userlist', pathMatch: 'full' },
+ { path: '', redirectTo: 'contacts', pathMatch: 'full' },
  { path:'home', component: HomeComponent },
  { path:'private/:group', component: PrivateChatComponent },
  { path:'contacts', component: ContactsComponent },

src/app/home/home.component.css

@@ -6,4 +6,4 @@ font-size: 15px;}
 div button { width: calc(10% - 1px); border: none;border-radius: 0}
 #conversation { list-style-type: none; margin: 0; padding: 0; }
 #conversation li { padding: 5px 10px; }
-#conversation li:nth-child(odd) { background: #dddddd; }
+.server  { background: #444444; }

src/app/home/home.component.ts

@@ -10,8 +10,7 @@ export class HomeComponent implements OnInit {
  constructor() { }
 
  ngOnInit() {
- // this.loadScript('https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js');
- // this.loadScript('https://code.jquery.com/jquery-1.11.1.js');
+
  this.loadScript('../assets/socket.io/client/public-socket.io.js');
  }
  public loadScript(url: string) {

src/assets/socket.io/client/private-socket.io.js

@@ -1,9 +1,10 @@
+if(socket) socket.close();
 var socket = io('http:https://localhost:3000/private');
 var user = Cookies.get('user');
 var group = Cookies.get('group');
 
-userData = [user, group];
-
+var userData = [user, group];
+var FLAG_SENDER ;
 
 // on connection to server, ask for user's name with an anonymous callback
 socket.on('connect', function(){
@@ -12,34 +13,39 @@ socket.on('connect', function(){
 });
 
 socket.on('getVisibility', function(read){
-updateRead(read); 
-});
-
-let updateRead = function(read) {
+ // update read 
+ let updateRead = function(read) {
  // alert(read);
  if(read) {
  $('#read').html("Read ✔");}
  else{
  $('#read').html("")
  }
+
 }
+updateRead(read); 
+});
 
 socket.on('updatechat', function (username, data) {
- $('#conversation').append('<li><b>'+username + ':</b> ' + data + '<br></li>');
-
+ // alert('private update');
  if(username == user) { 
  // alert('if');
+ $('#conversation').append('<li><b style="color: green">'+username + ':</b> ' + data + '<br></li>');
+ FLAG_SENDER = true;
  }
  else {
  // alert('else')
+ FLAG_SENDER = false;
+ $('#conversation').append('<li><b>'+username + ':</b> ' + data + '<br></li>');
+
  socket.emit('sendVisibility', vis());
  $('#read').html("");
  }
 });
 
 
 socket.on('server',function(msg){
- $('#conversation').append('<li> <b>Server: </b>'+msg+'</li>');
+ $('#conversation').append('<li class="server" style="background: #ededed" > <b>Server: </b>'+msg+'</li>');
 });
 
 // on load of page
@@ -48,6 +54,7 @@ $(function(){
  $('#send').click( function() {
  var message = $('#chat-input').val();
  $('#chat-input').val('');
+ // alert('private send');
  socket.emit('sendchat', message);
  });
 
@@ -78,13 +85,14 @@ var vis = (function(){
  return !document[stateKey];
  }
 })();
+// update read when user come later in time
 vis(function(){
  if(vis()){
+ if(!FLAG_SENDER){
+ socket.emit('sendVisibility', vis());
+ }
  console.log('visible now');
-// setTimeout(function(){
-// console.log('visible now');
-// alert();
-// }, 5000)
+
  }
  });
 

src/assets/socket.io/client/public-socket.io.js

@@ -1,18 +1,24 @@
+if(socket) socket.close();
 var socket = io('http:https://localhost:3000/public');
-var username = Cookies.get('user');
+var user = Cookies.get('user');
 // on connection to server, ask for user's name with an anonymous callback
 socket.on('connect', function(){
  // call the server-side function 'adduser' and send one parameter
-
- socket.emit('adduser', username); //Math.round(Math.random()*1000))
+ socket.emit('adduser', user); 
 });
 
 socket.on('updatechat', function (username, data) {
+ // alert('public update');
+ if(username == user){
+ $('#conversation').append('<li><b style="color: green">'+username + ':</b> ' + data + '<br></li>');
+ } else {
  $('#conversation').append('<li><b>'+username + ':</b> ' + data + '<br></li>');
+
+ }
 });
 
 socket.on('server',function(msg){
- $('#conversation').append('<li> <b>Server: </b>'+msg+'</li>');
+ $('#conversation').append('<li class="server" style="background: #ededed" > <b>Server: </b>'+msg+'</li>');
 });
 
 // on load of page
@@ -21,6 +27,7 @@ $(function(){
  $('#send').click( function() {
  var message = $('#chat-input').val();
  $('#chat-input').val('');
+ // alert('public send');
  socket.emit('sendchat', message);
  });