我要评论服务端(nodejs/express):
let app = require('express')();
let http = require('http').server(app);
let io = require('socket.io')(http);
io.on('connection', (socket) => {
console.log('user connected');
socket.on('disconnect', function(){
console.log('user disconnected');
});
socket.on('add-message', (message) => {
io.emit('message', {type:'new-message', text: message});
});
});
http.listen(5000, () => {
console.log('started on port 5000');
});
客户端，创建一个chatservice
import { subject } from 'rxjs/subject';
import { observable } from 'rxjs/observable';
import * as io from 'socket.io-client';
export class chatservice {
private url = 'http://localhost:5000';
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;
}
}
chatcomponent
import { component, oninit, ondestroy } from '@angular/core';
import { control } from '@angular/common';
import { chatservice } from './chat.service';
@component({
moduleid: module.id,
selector: 'chat',
template: `<div *ngfor="let message of messages">
{{message.text}}
</div>
<input [(ngmodel)]="message" /><button (click)="sendmessage()">send</button>`,
providers: [chatservice]
})
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(message => {
this.messages.push(message);
})
}
ngondestroy() {
this.connection.unsubscribe();
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论