Socket.io отличается для клиентской стороны, он называется socket.io-client.Вам нужно получить его, используя:
npm install socket.io-client
Что ж, Мартин, тебе не нужно явно ссылаться на файл скрипта в html.Вам просто нужно импортировать переменную socket.io-client в его файл машинописного текста.
import * as io from 'socket.io-client'. //And then connect using
try {
this._socket = io.connect(socket.io_port_you_are_using_in_server.js)
}
catch (e) {
console.log('error')
}
Теперь вы можете использовать this._socket везде, где требуется, как вы делаете в server.js.Я также создал такое приложение, как вы, используя MEAN стек 7 месяцев назад, но я предпочел использовать сервис, так как мне нужно использовать функцию чата в более чем 3 компонентах.Я даю вам пример кода, который может вам помочь.
joinRoom(room: string, handler: string): Observable<any> {
this._socket.emit('join', { 'room': room, 'handler': handler });
setTimeout(()=>{
console.log(this._socket.id)
},10)
let observable = new Observable((observer) => {
this._socket.on('new user', (data) => {
observer.next(data);
})
})
return observable;
}
leaveRoom(room: string) {
this._socket.emit('leave', room);
this._socket.removeAllListeners()
}
getMessages(): Observable<any> {
let observable = new Observable((observer) => {
this._socket.on('get message', (data) => {
observer.next(data);
})
})
return observable;
}
Просто подпишитесь на сервис и используйте привязку для отображения сообщений в шаблоне.
//create array of received msgs
received: any[] = [];
//And in ngOnInit lifecycle hook:
this._chatService.getMessages().subscribe((data) => {
this.received.push(data.msg )
Теперь вы можете использовать * ngFor в шаблоне для отображения сообщений.
<p *ngFor="let msg of received">msg</p>
Вы можете настроить код по вашему требованию.
Удачи, чувак!