Wie man socket.io-client in angular verwendet 4

Question

Serverseite ist php laravel echo websocket und ich versuche, durch Angular 4 zu verbinden. Ich versuchte mit ng2-socket-io - npm und auch Laravel-Echo - npm aber keine von ihnen waren erfolgreich. Wenn jemand eine Dokumentation oder Anleitung weiß, wie ich es benutzen kann, bitte helfen Sie

Answer 1

Hallo @giga Arbeitsbeispiel wird unten angegeben.

serverseitige (NodeJS)

var express = require('express'); 
var path = require('path'); 
var app = express(); 
var server = require('http').Server(app); 
var io = require('socket.io')(server); 

var port = 8000; 

app.use(express.static(path.join(__dirname, "public"))); 

io.on('connection', (socket) => { 
console.log('new connection made'); 

socket.on('event1', (data) => { 
    console.log(data.msg); 
}); 

socket.emit('event2', { 
    msg: 'Server to client, do you read me? Over.' 
}); 

socket.on('event3', (data) => { 
    console.log(data.msg); 
    socket.emit('event4', { 
    msg: 'Loud and clear :)' 
    }); 
}); 
}); 

server.listen(port,() => { 
    console.log("Listening on port " + port); 
}); 

Angular4 Code

import { Component, OnInit } from '@angular/core'; 
import * as io from 'socket.io-client'; 

@Component({ 
    moduleId: module.id, 
    selector: 'ch-home', 
    styleUrls: ['home.styles.css'], 
    templateUrl: 'home.template.html' 
}) 

export class HomeComponent implements OnInit { 
    messageText: string; 
    messages: Array<any>; 
    socket: SocketIOClient.Socket; 

    constructor() { 
    // this.socket = io.connect('http://localhost:8000'); 
    this.socket = io.connect(); 
    } 

    ngOnInit() { 
     this.messages = new Array(); 

     this.socket.on('message-received', (msg: any) => { 
      this.messages.push(msg); 
      console.log(msg); 
      console.log(this.messages); 
     }); 
     this.socket.emit('event1', { 
      msg: 'Client to server, can you hear me server?' 
     }); 
     this.socket.on('event2', (data: any) => { 
     console.log(data.msg); 
     this.socket.emit('event3', { 
      msg: 'Yes, its working for me!!' 
     }); 
     }); 
     this.socket.on('event4', (data: any) => { 
      console.log(data.msg); 
     }); 
    } 

    sendMessage() { 
    const message = { 
     text: this.messageText 
    }; 
    this.socket.emit('send-message', message); 
    // console.log(message.text); 
    this.messageText = ''; 
    } 

} 

Answer 2

Als Service:

import { Injectable } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import * as io from 'socket.io-client'; 

@Injectable() 
export class ChatService { 
    private socket: SocketIOClient.Socket; 

    constructor() { 
    this.socket = io('http://localhost:3000'); 
    } 

    // EMITTER 
    sendMessage(msg: string) { 
    this.socket.emit('sendMessage', { message: msg }); 
    } 

    // HANDLER 
    onNewMessage() { 
    return Observable.create(observer => { 
     this.socket.on('newMessage', msg => { 
     observer.next(msg); 
     }); 
    }); 
    } 
} 

In-Komponente:

import { Component, OnInit } from '@angular/core'; 
import { ChatService } from './chat-service'; 

@Component({ 
    // ...blabla... 
}) 
export class ChatComponent implements OnInit { 
    msgInput: string = 'lorem ipsum'; 

    constructor(
    private chatService: ChatService, 
) { } 

    ngOnInit() { 
    this.chatService.onNewMessage().subscribe(msg => { 
     console.log('got a msg: ' + msg); 
    }); 
    } 

    sendButtonClick() { 
    this.chatService.sendMessage(this.msgInput); 
    } 
} 

Answer 3

Neben der Antwort des VithuBati Sie installieren müssen: npm i socket.io-client --save npm i @types/socket.io-client --save