Wie zu verwenden-sockel.io-client-im Winkel 4

Server-Seite php laravel echo websocket und ich bin versucht, eine Verbindung von Winkel-4. Ich habe versucht, mit ng2-socket-io - npm und auch laravel-echo - npm-aber keiner von Ihnen waren erfolgreich. Wenn jemand weiß, keine Dokumentation oder ein tutorial, wie ich es verwenden können, bitte helfen Sie

InformationsquelleAutor Giga Songulashvili | 2017-11-07

  1. 23

    Hi @giga Beispiel ist unten gegeben.

    SETUP

    npm i socket.io-client --save
npm i @types/socket.io-client --save

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

    Client-side - 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 = '';
  }

}
    Danke, dass war hilfreich
    stackoverflow.com/questions/52702054/... can u Hilfe bei dieser Frage
    hey, wie haben Sie verbinden Sie es mit laravel?
    was sind die event1,event2,event3,event4 ? sind Sie Funktion, Namen ? Wie eine Funktion ( oder Methode ), die Sie erstellt, das über http-request ?

    InformationsquelleAutor VithuBati

  2. 12

    Setup

    npm install socket.io-client --save

    npm install @types/socket.io-client --save-dev

    As a 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);
  }
}
    sendMessage(msg: string) { dieses.socket.emit('sendMessage', { message: msg }); } Wie kann ich senden Anerkennung hier?

    InformationsquelleAutor MA-Maddin

  3. 1

    Neben der VithuBati die Antwort, die Sie brauchen, um zu installieren:

    npm i socket.io-client --save
    npm i @types/socket.io-client --save

    Also ich habe für die zweite cmd zu? Die "SocketIOClient.Buchse" namespace nicht gefunden in meinem Projekt...
    Yep. die zweite benötigt wird.

    InformationsquelleAutor David Dehghan

Schreibe einen Kommentar