1
Ich benutze Socket.io 1.0 mit Angular 2.0.0-rc.5 und Express 4. Emit in bin/www Brände so oft wie die Benutzer verbunden, also eher als eine Broadcast erhalten sie mehrere und nur das erste Ereignis hat die Nachricht. console.log Mit fast überall in ich kann es nur sagen, mehrere Protokolle innerhalb bin/www socket.on ('add-message')Socket.io mit Angular 2 Ereignis wird zweimal ausgelöst
bin/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 produziert
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>