bug solved

server/server.js

@@ -54,6 +54,7 @@ socket.on('sendchat', function (data) {
 
 socket.on('disconnect', function(){
  socket.broadcast.to('public').emit('server','<i>' + socket.username + '</i> has left the room');
+ socket.emit('end');
  socket.leave(socket.room);
  delete public_usernames[socket.username];
  // console.log(usernames);
@@ -68,7 +69,7 @@ private_rooms = [];
 io_private.on('connection', function(socket){
 
  socket.on('createRoom', function(userData){
- socket.user1 = userData[0];
+ socket.username = userData[0];
  socket.room = userData[1];
  private_rooms[socket.room] = socket.room;
  // console.log(private_rooms);
@@ -79,20 +80,23 @@ io_private.on('connection', function(socket){
  socket.emit('server', 'you have connected to a private room: '+socket.room);
 
  // echo to public room that a person has connected to their room
- socket.broadcast.to(socket.room).emit('server', '<i>' + socket.user1 + '</i> has connected to this room');
+ socket.broadcast.to(socket.room).emit('server', '<i>' + socket.username + '</i> has connected to this room');
 });
 
 socket.on('sendchat', function (data) {
  // we tell the client to execute 'updatechat'
- io_private.to(socket.room).emit('updatechat', socket.user1, data);
+ io_private.to(socket.room).emit('updatechat', socket.username, data);
 });
 
 socket.on('sendVisibility', function(vis){
  socket.broadcast.to(socket.room).emit('getVisibility', vis)
 })
 socket.on('disconnect', function(){
- socket.broadcast.to(socket.room).emit('server','<i>' + socket.user2 + '</i> has left the room');
+ socket.broadcast.to(socket.room).emit('server','<i>' + socket.username + '</i> has left the room');
+ socket.broadcast.to(socket.room).emit('getVisibility', false);
  socket.leave(socket.room);
+ delete socket.room;
+ delete socket.username;
  });
 
 });

src/app/app-routing.module.ts

@@ -6,17 +6,18 @@ import { HomeComponent } from './home/home.component';
 import { PrivateChatComponent } from './private-chat/private-chat.component';
 import { ContactsComponent } from './contacts/contacts.component';
 import { UsersComponent } from './users/users.component';
+import { AuthGuardService } from './services/auth-guard.service';
 
 const routes: Routes = [
 { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
 { path: 'login', component: LoginComponent },
 { path: 'dashboard', component: DashboardComponent,
  children: [ // <---- child components declared here
  { path: '', redirectTo: 'contacts', pathMatch: 'full' },
- { path:'home', component: HomeComponent },
- { path:'private/:group', component: PrivateChatComponent },
- { path:'contacts', component: ContactsComponent },
- { path:'userlist', component: UsersComponent },
+ { path: 'home', component: HomeComponent, canDeactivate: [AuthGuardService]},
+ { path: 'private/:group', component: PrivateChatComponent, canDeactivate: [AuthGuardService] },
+ { path: 'contacts', component: ContactsComponent },
+ { path: 'userlist', component: UsersComponent },
  ]
 }
 ];

src/app/app.module.ts

@@ -35,8 +35,8 @@ import { UsersComponent } from './users/users.component';
  ReactiveFormsModule,
  HttpClientModule,
  ],
- exports: [],
  providers: [CookieService],
- bootstrap: [AppComponent]
+ bootstrap: [AppComponent],
+
 })
 export class AppModule { }

src/app/home/home.component.css

@@ -1,9 +1,10 @@
 * { margin: 0; padding: 0; box-sizing: border-box; }
 body { font: 13px Helvetica, Arial; }
 div { background: #000000; padding: 1px; position: relative;right: 0; bottom: 0;width: 100%;border: 1px solid black }
-div input { border: 0; padding: 10px; width: 90%; margin-right: 1px; outline:none;border: 1px solid black;background: #ffffff;
+div input { border: 0; padding: 10px; width: 100%; margin-right: 1px; outline:none;border: 1px solid black;background: #ffffff;
 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; }
 .server { background: #444444; }
+

src/app/home/home.component.html

@@ -1,6 +1,6 @@
 <div>
-<input matInput id="chat-input" placeholder="Type Something" autocomplete="off" />
-<button mat-raised-button id="send">Send</button>
+<input matInput id="chat-input" autocomplete="off" placeholder="Type Something ... and hit enter" #input/>
+<!-- <button mat-raised-button id="send">Send</button> -->
 </div>
 <mat-toolbar>Public Group</mat-toolbar>
 <mat-divider></mat-divider>

src/app/home/home.component.ts

@@ -1,19 +1,26 @@
-import { Component, OnInit } from '@angular/core';
-
+import { Component, OnInit} from '@angular/core';
+import { ViewChild, AfterViewInit, ElementRef } from '@angular/core';
 @Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
 })
-export class HomeComponent implements OnInit {
+export class HomeComponent implements OnInit, AfterViewInit {
+
+ @ViewChild('input', {static: false}) private elementRef: ElementRef;
 
  constructor() { }
 
  ngOnInit() {
 
  this.loadScript('../assets/socket.io/client/public-socket.io.js');
  }
- public loadScript(url: string) {
+
+ ngAfterViewInit(): void {
+ this.elementRef.nativeElement.focus();
+ }
+
+ public loadScript(url: string) {
  const body = document.body as HTMLDivElement;
  const script = document.createElement('script');
  script.innerHTML = '';

src/app/private-chat/private-chat.component.css

@@ -1,9 +1,10 @@
 * { margin: 0; padding: 0; box-sizing: border-box; }
 body { font: 13px Helvetica, Arial; }
 div { background: #000000; padding: 1px; position: relative;right: 0; bottom: 0;width: 100%;border: 1px solid black }
-div input { border: 0; padding: 10px; width: 90%; margin-right: 1px; outline:none;border: 1px solid black;background: #ffffff;
+div input { border: 0; padding: 10px; width: 100%; margin-right: 1px; outline:none;border: 1px solid black;background: #ffffff;
 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/private-chat/private-chat.component.html

@@ -1,6 +1,6 @@
 <div>
- <input matInput id="chat-input" placeholder="Type Something" autocomplete="off" />
- <button mat-raised-button id="send">Send</button>
+ <input matInput id="chat-input" autocomplete="off" placeholder="Type Something ... and hit enter" #input/>
+ <!-- <button mat-raised-button id="send">Send</button> -->
 </div>
 <mat-toolbar>Private Group</mat-toolbar>
 <mat-divider></mat-divider>

src/app/private-chat/private-chat.component.ts

@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit} from '@angular/core';
+import { ViewChild, AfterViewInit, ElementRef } from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 import { CookieService } from 'ngx-cookie-service';
 
@@ -7,7 +8,9 @@ import { CookieService } from 'ngx-cookie-service';
  templateUrl: './private-chat.component.html',
  styleUrls: ['./private-chat.component.css']
 })
-export class PrivateChatComponent implements OnInit {
+export class PrivateChatComponent implements OnInit, AfterViewInit {
+
+ @ViewChild('input', {static: false}) private elementRef: ElementRef;
 
  constructor(private route: ActivatedRoute, private cookieService: CookieService) {
  const group = route.snapshot.params.group;
@@ -18,6 +21,9 @@ export class PrivateChatComponent implements OnInit {
  ngOnInit() {
  this.loadScript('../assets/socket.io/client/private-socket.io.js');
  }
+ ngAfterViewInit(): void {
+ this.elementRef.nativeElement.focus();
+ }
  public loadScript(url: string) {
  const body = document.body as HTMLDivElement;
  const script = document.createElement('script');

src/app/services/auth-guard.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthGuardService } from './auth-guard.service';
+
+describe('AuthGuardService', () => {
+ beforeEach(() => TestBed.configureTestingModule({}));
+
+ it('should be created', () => {
+ const service: AuthGuardService = TestBed.get(AuthGuardService);
+ expect(service).toBeTruthy();
+ });
+});

src/app/services/auth-guard.service.ts

@@ -0,0 +1,40 @@
+import { Injectable } from '@angular/core';
+import { HomeComponent } from './../home/home.component'
+import {
+ CanActivate,
+ CanActivateChild,
+ CanDeactivate,
+ ActivatedRouteSnapshot,
+ RouterStateSnapshot
+} from '@angular/router';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class AuthGuardService implements CanDeactivate<HomeComponent> {
+
+ constructor() { }
+ canDeactivate(component: HomeComponent) {
+ // if ( window.confirm('Are you sure you want to leave the room?')) {
+ // console.log('inside deactivate, Allowed');
+ // // load disconnect script
+ // this.loadScript('../assets/socket.io/client/close-connection.js');
+ // return true;
+ // } else {
+ // console.log('inside deactivate, Not Allowed');
+ // return false;
+ // }
+ this.loadScript('../assets/socket.io/client/close-connection.js');
+ return true;
+ }
+ // load script function
+ public loadScript(url: string) {
+ const body = document.body as HTMLDivElement;
+ const script = document.createElement('script');
+ script.innerHTML = '';
+ script.src = url;
+ script.async = false;
+ script.defer = true;
+ body.appendChild(script);
+ }
+}

src/assets/socket.io/client/close-connection.js

@@ -0,0 +1,9 @@
+// var sock;
+if(typeof socket !== 'undefined') {
+
+ socket.emit('sendVisibility', false);
+ console.log('connection is closed');
+ socket.disconnect();
+}else{
+console.log('no connection is open');
+}

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

@@ -50,22 +50,25 @@ socket.on('server',function(msg){
 
 // on load of page
 $(function(){
- // when the client clicks SEND
- $('#send').click( function() {
+ function sendChat(){
  var message = $('#chat-input').val();
- $('#chat-input').val('');
- // alert('private send');
- socket.emit('sendchat', message);
- });
-
- // when the client hits ENTER on their keyboard
- $('#chat-input').keypress(function(e) {
- if(e.which == 13) {
- $(this).blur();
- $('#send').focus().click();
- }
+ $('#chat-input').val('');
+ // alert('public send');
+ socket.emit('sendchat', message);
+ }
+ // when the client hits ENTER on their keyboard
+ $('#chat-input').keypress(function(e) {
+ if(e.which == 13) {
+ // $(this).blur();
+ // $('#send').focus().click();
+ sendChat();
+ }
+ });
+ // when the client clicks SEND
+ $('#send').click( function() {
+ sendChat();
+ });
  });
-});
 // visibility api
 var vis = (function(){
  var stateKey, eventKey, keys = {

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

@@ -1,4 +1,4 @@
-if(socket) socket.close();
+
 var socket = io('http:https://localhost:3000/public');
 var user = Cookies.get('user');
 // on connection to server, ask for user's name with an anonymous callback
@@ -20,23 +20,28 @@ socket.on('updatechat', function (username, data) {
 socket.on('server',function(msg){
  $('#conversation').append('<li class="server" style="background: #ededed" > <b>Server: </b>'+msg+'</li>');
 });
-
+socket.on('end',function(){
+});
 // on load of page
 $(function(){
- // when the client clicks SEND
- $('#send').click( function() {
-  var message = $('#chat-input').val();
+
+function sendChat(){
+ var message = $('#chat-input').val();
  $('#chat-input').val('');
  // alert('public send');
  socket.emit('sendchat', message);
- });
-
+}
  // when the client hits ENTER on their keyboard
  $('#chat-input').keypress(function(e) {
  if(e.which == 13) {
- $(this).blur();
- $('#send').focus().click();
+ // $(this).blur();
+ // $('#send').focus().click();
+ sendChat();
  }
  });
+ // when the client clicks SEND
+ $('#send').click( function() {
+ sendChat();
+ });
 });