1
我使用的是Socket.io 1.0與Angular 2.0.0-rc.5和Express 4.在bin/www中發射的次數與用戶連接次數一樣多，所以不是一次廣播他們得到多個，只有第一個事件有消息。在幾乎任何地方使用的console.log我可以告訴它只能產生斌/ WWW socket.on內多個日誌（ '附加信息'）Socket.io與角2事件兩次觸發
斌/ WWW
#!/usr/bin/env node
/**
* Module dependencies.
*/
var app = require('../app');
var debug = require('debug')('a2-test:server');
var http = require('http');
/**
* Get port from environment and store in Express.
*/
var port = normalizePort(process.env.PORT || '4000');
app.set('port', port);
/**
* Create HTTP server.
*/
var server = http.createServer(app);
var io = require('socket.io')(server);
io.on('connection', function (socket) {
console.log('a user connected', socket.id);
socket.on('add-message', (message) => {
console.log('broadcast', socket.id, message)
io.emit('message', {text: message})
});
});
/**
* Listen on provided port, on all network interfaces.
*/
server.listen(port);
server.on('error', onError);
server.on('listening', onListening);
chat.component.ts
export class ChatComponent implements OnInit, OnDestroy {
messages = [];
connection;
message;
constructor(private chatService: ChatService) {
}
sendMessage() {
this.chatService.sendMessage(this.message);
this.message = '';
}
ngOnInit() {
this.connection = this.chatService.getMessages().subscribe(
(msg) => {
this.messages.push(msg)
});
}
ngOnDestroy() {
this.connection.unsubscribe();
}
}
chat.service.ts
import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';
import * as io from 'socket.io-client';
export class ChatService {
private url = 'http://localhost:4000';
private socket;
sendMessage(message){
this.socket.emit('add-message', message);
}
getMessages() {
let observable = new Observable(observer => {
this.socket = io(this.url);
this.socket.on('message', (data) => {
observer.next(data);
});
return() => {
this.socket.disconnect();
};
})
return observable;
}
}
個chat.template.html
<div class="col-lg-8 well" style="min-height: 200px">
<ul class="col-lg-12">
<li *ngFor="let message of messages">
{{message.text}}
</li>
</ul>
</div>
<div class="col-lg-4 well">
<input [(ngModel)]="message" class="form-control">
<br>
<button class="btn btn-primary col-lg-4" (click)="sendMessage()">Send</button>
</div>