Skip to content

Commit 469a7a7

Browse files
MarkPieszakMarkPieszak
committed
fix(signal-r): updated signalr chatroom
1 parent 94605d6 commit 469a7a7

File tree

5 files changed

+68
-58
lines changed

5 files changed

+68
-58
lines changed

‎ClientApp/app/components/navmenu/navmenu.component.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,11 @@
3939
<span class='glyphicon glyphicon-star-empty'></span> Lazy-loaded demo
4040
</a>
4141
</li>
42-
<!--<li [routerLinkActive]="['link-active']">
43-
<a [routerLink]="['/chat']">
44-
<span class='glyphicon glyphicon-comment'></span> Chat
45-
</a>
46-
</li>-->
42+
<li [routerLinkActive]="['link-active']">
43+
<a [routerLink]="['/chat']">
44+
<span class='glyphicon glyphicon-comment'></span> Chat
45+
</a>
46+
</li>
4747
</ul>
4848
</div>
4949
</div>

‎ClientApp/app/containers/chat/chat.component.html‎

Lines changed: 43 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,51 @@
1-
<h2>SignalR chat example</h2>
1+
<h2>WebSockets (SignalR) Chatroom Example</h2>
22

3-
<div class="row">
4-
<div class="col-md-12">
5-
<div class="panel panel-primary">
6-
<div class="panel-heading">
7-
<span class="glyphicon glyphicon-comment"></span> Chat
8-
</div>
9-
<div class="panel-body">
10-
<ul class="chat">
3+
<blockquote>
4+
Data is stored in Azure here - so even in localhost you might be chatting with other people!
5+
</blockquote>
116

12-
<li class="left clearfix" *ngFor="let message of chatMessages">
13-
<!--<span chatMessage="chat-img pull-left">
14-
<img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle" />
15-
</span>-->
7+
<div class="row">
8+
<div class="col-md-12">
9+
<div class="panel panel-primary">
10+
<div class="panel-heading">
11+
<span class="glyphicon glyphicon-comment"></span> Angular Chat
12+
</div>
13+
<div class="panel-body">
14+
<ul class="chat">
1615

17-
<div class="chat-body clearfix">
18-
<div class="header">
19-
<strong class="primary-font">{{message.user}}</strong>
20-
<small class="pull-right text-muted"><span class="glyphicon glyphicon-time"></span>x mins ago</small>
21-
</div>
22-
<p>
23-
{{message.content}}
24-
</p>
25-
</div>
26-
</li>
16+
<li class="left clearfix" *ngFor="let message of chatMessages">
17+
<span chatMessage="chat-img pull-left">
18+
<img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle" />
19+
</span>
2720

28-
</ul>
21+
<div class="chat-body clearfix">
22+
<div class="header">
23+
<strong class="primary-font">{{message.user}}</strong>
24+
<small class="pull-right text-muted"><span class="glyphicon glyphicon-time"></span>x mins ago</small>
25+
</div>
26+
<p>
27+
{{ message.content }}
28+
</p>
2929
</div>
30-
<div class="panel-footer">
31-
<div class="input-group">
32-
<span class="input-group-btn" style="padding-right: 10px; min-width: 150px;">
33-
<input #username id="btn-input" type="text" class="form-control input-sm" value="Neo" />
34-
</span>
35-
<input #message id="btn-input" type="text" class="form-control input-sm" placeholder="Type your message here..." />
36-
<span class="input-group-btn ">
37-
<button class="btn btn-warning btn-sm" id="btn-chat" (click)="sendMessage(username.value, message.value)"> Send</button>
38-
</span>
39-
</div>
40-
</div>
41-
</div>
30+
</li>
31+
32+
</ul>
33+
</div>
34+
<div class="panel-footer">
35+
<form>
36+
<div class="input-group">
37+
<span class="input-group-btn" style="padding-right: 10px; min-width: 150px;">
38+
<input #username id="btn-input" type="text" class="form-control input-sm" value="Neo" />
39+
</span>
40+
<input #messageInput id="btn-input" type="text" class="form-control input-sm" placeholder="Type your message here..." />
41+
<span class="input-group-btn ">
42+
<button class="btn btn-warning btn-sm" id="btn-chat" (click)="sendMessage(username.value, messageInput)"> Send</button>
43+
</span>
44+
</div>
45+
</form>
46+
</div>
4247
</div>
48+
</div>
4349
</div>
4450

45-
<pre>{{chatMessages | json}}</pre>
51+
<pre>{{ chatMessages | json }}</pre>

‎ClientApp/app/containers/chat/chat.component.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333

3434
.panel-body {
3535
overflow-y: scroll;
36-
height: 600px;
36+
height: 500px;
3737
}
3838

3939
::-webkit-scrollbar-track {
@@ -49,4 +49,4 @@
4949
::-webkit-scrollbar-thumb {
5050
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
5151
background-color: #555;
52-
}
52+
}

‎ClientApp/app/containers/chat/chat.component.ts‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { SignalR, BroadcastEventListener, SignalRConnection } from 'ng2-signalr'
55
import { Subscription } from 'rxjs/Subscription';
66

77
export class ChatMessage {
8-
constructor(public user: string, public content: string) { }
8+
constructor(public content: string, public user: string) { }
99
}
1010

1111
@Component({
@@ -21,23 +21,25 @@ export class ChatComponent implements OnInit {
2121
private _subscription: Subscription;
2222

2323
constructor(route: ActivatedRoute) {
24-
this._connection = route.snapshot.data['connection'];
24+
this._connection = route.snapshot.data['connection'];
2525
}
2626

2727
ngOnInit() {
28-
const onMessageSent$ = new BroadcastEventListener<ChatMessage>('OnMessageSent');
29-
this._connection.listen(onMessageSent$);
30-
this._subscription = onMessageSent$.subscribe((chatMessage: ChatMessage) => {
31-
this.chatMessages.push(chatMessage);
32-
console.log('chat messages', this.chatMessages);
33-
});
28+
const onMessageSent$ = new BroadcastEventListener<ChatMessage>('OnMessageSent');
29+
this._connection.listen(onMessageSent$);
30+
this._subscription = onMessageSent$.subscribe((chatMessage: ChatMessage) => {
31+
this.chatMessages.push(chatMessage);
32+
console.log('chat messages', this.chatMessages);
33+
});
3434
}
3535

3636
// send chat message to server
37-
sendMessage(user, message) {
38-
console.log('send message', user, message);
39-
this._connection.invoke('Chat', new ChatMessage(user, message))
40-
.catch((err: any) => console.log('Failed to invoke', err));
37+
sendMessage(user, messageInput) {
38+
console.log('send message', user, messageInput.value);
39+
this._connection.invoke('Chat', new ChatMessage(messageInput.value, user))
40+
.catch((err: any) => console.log('Failed to invoke', err));
41+
42+
messageInput.value = '';
4143
}
4244

4345
}

‎Views/Shared/_Layout.cshtml‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,18 @@
1818
<body>
1919
@RenderBody()
2020

21-
<!-- remove if you're not going to use SignalR -->
21+
<!-- *** NOTE *** Remove this and the signalr script include below
22+
- if you're NOT going to use SignalR -->
2223
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
2324
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
2425
crossorigin="anonymous"></script>
2526

26-
<script src="http://ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-2.2.0.min.js"></script>
27+
<script src="http://ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-2.2.1.min.js"></script>
2728

2829
<!-- Here we're passing down any data to be used by grabbed and parsed by Angular -->
2930
@Html.Raw(ViewData["TransferData"])
3031

3132
@RenderSection("scripts", required: false)
33+
3234
</body>
3335
</html>

0 commit comments

Comments
 (0)