Skip to content

Commit 5978ff9

Browse files
SahusoftSahusoft
Sahusoft
authored and
Sahusoft
committed
Added Functionalities
1 parent 854e4ae commit 5978ff9

40 files changed

+3872
-190
lines changed

‎client/app.component.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<nav>
2+
WELCOME TO CHAT-APP
3+
</nav>
4+
5+
<router-outlet></router-outlet>

‎client/app.component.js

Lines changed: 4 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,30 +5,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
55
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
66
return c > 3 && r && Object.defineProperty(target, key, r), r;
77
};
8-
var core_1 = require('@angular/core');
9-
//import { OnInit } from '@angular/core';
10-
require("/socket.io/socket.io.js");
11-
require("http://code.jquery.com/jquery-1.11.1.js");
8+
var core_1 = require("@angular/core");
129
var AppComponent = (function () {
1310
function AppComponent() {
14-
this.title = 'Angular 2 Working!';
1511
}
1612
AppComponent = __decorate([
1713
core_1.Component({
18-
selector: 'my-app',
19-
template: "<h1>{{title}}</h1>"
14+
moduleId: module.id,
15+
selector: "sd-app",
16+
templateUrl: "app.component.html"
2017
})
2118
], AppComponent);
2219
return AppComponent;
2320
}());
2421
exports.AppComponent = AppComponent;
25-
var socket = io();
26-
//io.connect();
27-
$('form').submit(function () {
28-
socket.emit('chatMessageToSocketServer', $('#message-box').val());
29-
$('#message-box').val('');
30-
return false;
31-
});
32-
socket.on('broadcastToAll_chatMessage', function (msg) {
33-
$('#messages').append($('<li>').text(msg));
34-
});

‎client/app.component.ts

Lines changed: 5 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,9 @@
1-
import { Component } from '@angular/core';
2-
//import { OnInit } from '@angular/core';
3-
4-
import "/socket.io/socket.io.js"
5-
import "http://code.jquery.com/jquery-1.11.1.js";
6-
1+
import { Component } from "@angular/core";
72

83
@Component({
9-
selector: 'my-app',
10-
template: `<h1>{{title}}</h1>`
4+
moduleId: module.id,
5+
selector: "sd-app",
6+
templateUrl: "app.component.html",
117
})
12-
export class AppComponent {
13-
title = 'Angular 2 Working!';
14-
var socket = io();
15-
//io.connect();
16-
$('form').submit(function(){
17-
socket.emit('chatMessageToSocketServer', $('#message-box').val());
18-
$('#message-box').val('');
19-
return false;
20-
});
21-
22-
socket.on('broadcastToAll_chatMessage', function(msg){
23-
$('#messages').append($('<li>').text(msg));
24-
});
25-
}
26-
278

9+
export class AppComponent {}

‎client/app.module.js

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,24 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
55
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
66
return c > 3 && r && Object.defineProperty(target, key, r), r;
77
};
8-
var core_1 = require('@angular/core');
9-
var platform_browser_1 = require('@angular/platform-browser');
10-
var forms_1 = require('@angular/forms');
11-
var app_component_1 = require('./app.component');
8+
var core_1 = require("@angular/core");
9+
var platform_browser_1 = require("@angular/platform-browser");
10+
var forms_1 = require("@angular/forms");
11+
var router_1 = require("@angular/router");
12+
var app_routing_1 = require("./app.routing");
13+
var app_component_1 = require("./app.component");
14+
var app_routing_2 = require("./app.routing");
15+
var index_1 = require("./nickname/index");
16+
var index_2 = require("./chat-component/index");
17+
// import { NicknameComponent } from './app.nicknameComponent';
1218
var AppModule = (function () {
1319
function AppModule() {
1420
}
1521
AppModule = __decorate([
1622
core_1.NgModule({
17-
imports: [platform_browser_1.BrowserModule, forms_1.FormsModule],
23+
imports: [platform_browser_1.BrowserModule, forms_1.FormsModule, app_routing_2.routing, router_1.RouterModule, router_1.RouterModule.forRoot(app_routing_1.appRoutes), index_1.NickNameModule, index_2.ChatModule],
1824
declarations: [app_component_1.AppComponent],
25+
providers: [app_routing_2.appRoutingProviders],
1926
bootstrap: [app_component_1.AppComponent]
2027
})
2128
], AppModule);

‎client/app.module.ts

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,24 @@
1-
import { NgModule } from '@angular/core';
2-
import { BrowserModule } from '@angular/platform-browser';
3-
import { FormsModule } from '@angular/forms';
1+
import { NgModule } from "@angular/core";
2+
import { BrowserModule } from "@angular/platform-browser";
3+
import { FormsModule } from "@angular/forms";
4+
import { RouterModule } from "@angular/router";
45

56

6-
import { AppComponent } from './app.component';
7+
import { appRoutes } from "./app.routing";
8+
import { AppComponent } from "./app.component";
9+
10+
import { routing, appRoutingProviders } from "./app.routing";
11+
12+
import { NickNameModule } from "./nickname/index";
13+
import { ChatModule } from "./chat-component/index";
14+
15+
// import { NicknameComponent } from './app.nicknameComponent';
716

817
@NgModule({
9-
imports: [ BrowserModule, FormsModule ],
18+
imports: [ BrowserModule, FormsModule, routing, RouterModule, RouterModule.forRoot(appRoutes), NickNameModule, ChatModule],
1019
declarations: [ AppComponent ],
20+
providers: [ appRoutingProviders ],
1121
bootstrap: [ AppComponent ]
1222
})
23+
1324
export class AppModule { }

‎client/app.routing.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
"use strict";
2+
var router_1 = require("@angular/router");
3+
var index_1 = require("./nickname/index");
4+
var index_2 = require("./chat-component/index");
5+
exports.appRoutes = index_1.nickNameRoutes.concat(index_2.chatComponentRoutes);
6+
exports.appRoutingProviders = [router_1.provideRouter(exports.appRoutes)];
7+
exports.routing = router_1.RouterModule.forRoot(exports.appRoutes);

‎client/app.routing.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { Routes, RouterModule, provideRouter } from "@angular/router";
2+
3+
import { nickNameRoutes } from "./nickname/index";
4+
5+
import { chatComponentRoutes } from "./chat-component/index";
6+
7+
import {ModuleWithProviders} from "@angular/core";
8+
9+
export const appRoutes: Routes = [
10+
...nickNameRoutes,
11+
...chatComponentRoutes
12+
];
13+
14+
export const appRoutingProviders: any[] = [ provideRouter(appRoutes) ];
15+
16+
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

‎client/chat-component/chat.component.html

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<html>
2+
<head>
3+
<title>Angular2_Node_chatApp</title>
4+
</head>
5+
<body >
6+
<div>
7+
<h2>ChatPage</h2>
8+
<div class="main">
9+
<div class="firstSubChild" >
10+
<ul id="messages"></ul>
11+
<div id="divID">
12+
<input id="message-boxID" #messagebox placeholder="Type your message here" (keyup)="sendMessageOnEnter($event, messagebox)" (keydown)="update()" autocomplete="off" value="" autofocus required>
13+
<button (click)="sendMessage(messagebox)">Send</button>
14+
</div>
15+
</div>
16+
17+
<div class="secondSubChild">
18+
<div id="newUserID" *ngIf="newUser">
19+
{{newUserName}} joined Chat!
20+
</div>
21+
<div id="leftUserID" *ngIf="leftUser">
22+
{{leftUserName}} left the Chat!
23+
</div>
24+
<ul id="client-list" >
25+
<li *ngFor="let name of clientsNameList" >
26+
<div>
27+
<input class="check-box" type="checkbox"
28+
[checked]="true">
29+
<label>{{name}}</label>
30+
</div>
31+
</li>
32+
</ul>
33+
</div>
34+
</div>
35+
<div id="resID" *ngIf="resFlag">
36+
this is the server response : {{response}}
37+
</div>
38+
</div>
39+
</body>
40+
</html>

‎client/chat-component/chat.component.js

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
"use strict";
2+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
3+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
4+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
5+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
6+
return c > 3 && r && Object.defineProperty(target, key, r), r;
7+
};
8+
var core_1 = require("@angular/core");
9+
var globalVars = require("../service/global");
10+
/// <reference path="../../typings/jquery/jquery.d.ts" />
11+
require("/socket.io/socket.io.js");
12+
var ChatComponent = (function () {
13+
function ChatComponent() {
14+
this.resFlag = false;
15+
this.newUser = false;
16+
this.exitedUser = false;
17+
this.newUserName = null;
18+
this.exitedUserName = null;
19+
this.sentMessageUsername = null;
20+
var reference = this;
21+
globalVars.socket.on("broadcastToAll_chatMessage", function (resObj) {
22+
if (reference.sentMessageUsername !== resObj.name) {
23+
reference.message = resObj.name + ": " + resObj.msg;
24+
$("#messages").append($("<li>").text(reference.message));
25+
}
26+
else if (reference.sentMessageUsername === resObj.name) {
27+
$("#messages").append($("<li>").text(resObj.msg));
28+
reference.sentMessageUsername = null;
29+
}
30+
});
31+
globalVars.socket.on("updateSocketList", function (list) {
32+
reference.clientsNameList = list;
33+
});
34+
globalVars.socket.on("addUserToSocketList", function (username) {
35+
reference.newUser = true;
36+
reference.newUserName = username;
37+
});
38+
globalVars.socket.on("removeUserFromSocketList", function (username) {
39+
reference.exitedUser = true;
40+
reference.exitedUserName = username;
41+
});
42+
}
43+
ChatComponent.prototype.sendMessage = function (data) {
44+
this.resFlag = true;
45+
var reference = this;
46+
globalVars.socket.emit("chatMessageToSocketServer", data.value, function (respMsg, username) {
47+
reference.sentMessageUsername = username;
48+
reference.response = respMsg;
49+
});
50+
$("#message-boxID").val(" ");
51+
};
52+
ChatComponent.prototype.sendMessageOnEnter = function ($event, messagebox) {
53+
if ($event.which === 13) {
54+
this.sendMessage(messagebox);
55+
}
56+
};
57+
ChatComponent.prototype.update = function () {
58+
this.resFlag = false;
59+
this.newUser = false;
60+
this.exitedUser = false;
61+
};
62+
ChatComponent = __decorate([
63+
core_1.Component({
64+
moduleId: module.id,
65+
selector: "chat-page",
66+
templateUrl: "./chat.component.html"
67+
})
68+
], ChatComponent);
69+
return ChatComponent;
70+
}());
71+
exports.ChatComponent = ChatComponent;

‎client/chat-component/chat.component.ts

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import { Component } from "@angular/core";
2+
import * as globalVars from "../service/global";
3+
/// <reference path="../../typings/jquery/jquery.d.ts" />
4+
5+
import "/socket.io/socket.io.js";
6+
7+
8+
@Component({
9+
moduleId: module.id,
10+
selector: "chat-page",
11+
templateUrl: "./chat.component.html"
12+
})
13+
14+
export class ChatComponent {
15+
reference: any;
16+
resFlag: boolean = false;
17+
newUser: boolean = false;
18+
exitedUser: boolean = false;
19+
newUserName: string = null;
20+
exitedUserName: string = null;
21+
sentMessageUsername: string = null;
22+
response: string;
23+
clientsNameList: number[];
24+
message: string;
25+
26+
constructor() {
27+
let reference = this;
28+
globalVars.socket.on("broadcastToAll_chatMessage", function(resObj) {
29+
if (reference.sentMessageUsername !== resObj.name) {
30+
reference.message = resObj.name + ": " + resObj.msg;
31+
$("#messages").append($("<li>").text(reference.message));
32+
}
33+
else if (reference.sentMessageUsername === resObj.name) {
34+
$("#messages").append($("<li>").text(resObj.msg));
35+
reference.sentMessageUsername = null;
36+
}
37+
});
38+
39+
40+
globalVars.socket.on("updateSocketList", function(list){
41+
reference.clientsNameList = list;
42+
});
43+
44+
globalVars.socket.on("addUserToSocketList", function(username){
45+
reference.newUser = true;
46+
reference.newUserName = username;
47+
});
48+
49+
globalVars.socket.on("removeUserFromSocketList", function(username){
50+
reference.exitedUser = true;
51+
reference.exitedUserName = username;
52+
});
53+
}
54+
55+
56+
sendMessage(data) {
57+
this.resFlag = true;
58+
let reference = this;
59+
globalVars.socket.emit("chatMessageToSocketServer", data.value, function(respMsg, username){
60+
reference.sentMessageUsername = username;
61+
reference.response = respMsg;
62+
});
63+
$("#message-boxID").val(" ");
64+
}
65+
66+
sendMessageOnEnter($event, messagebox) {
67+
if ($event.which === 13) { // ENTER_KEY
68+
this.sendMessage(messagebox);
69+
}
70+
}
71+
72+
update() {
73+
this.resFlag = false;
74+
this.newUser = false;
75+
this.exitedUser = false;
76+
}
77+
}

0 commit comments

Comments
 (0)