각도 4에서 socket.io-client를 사용하는 방법

Question

서버 측은 php laravel echo websocket이고 Angular 4로 연결하려고합니다. ng2-socket-io-npm을 사용하고 laravel-echo-npm을 사용했지만 사용하지 않으려 고 시도했습니다. 그들 중 성공적으로 성공했다. 누구든지 내가 사용할 수있는 문서 또는 튜토리얼을 알고 있다면 도움을 청하십시오.

Answer 1

안녕하세요 @giga 실례가 아래에 나와 있습니다. 서비스로

서버 측 (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 코드

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

: 성분에서

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); 
     }); 
    }); 
    } 
} 

:

,

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

이 외에도 VithuBati의 답변을 설치해야합니다 npm i socket.io-client --save npm i @types/socket.io-client --save