Comment utiliser socket.io-client angulaire 4

Côté serveur php laravel echo websocket et je suis en train d'essayer de se connecter par Angulaire 4. J'ai essayé d'utiliser ng2-socket-io - mnp et aussi laravel-echo - mnp, mais aucun d'entre eux ont été avec succès. Si quelqu'un sait de toute documentation ou tutoriel comment je peux l'utiliser, s'il vous plaît aider

OriginalL'auteur Giga Songulashvili | 2017-11-07

  1. 23

    Salut @giga de Travail exemple est donné ci-dessous.

    INSTALLATION

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

    Côté serveur (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);
});

    Côté Client - 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 = '';
}
}
    Merci de ce que c'était utile
    stackoverflow.com/questions/52702054/... u peut aider pour cette question
    hey, comment avez-vous connecter avec laravel?
    quelles sont les event1 événement2,event3,event4 ? sont-ils des noms de fonction ? Comme une fonction ( ou méthode ) vous avez créé qui a de la requête http ?

    OriginalL'auteur VithuBati

  2. 12

    Installation

    npm install socket.io-client --save

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

    En tant que 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);
});
});
}
}

    En composant:

    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) { this.socket.emit('sendMessage', { message: msg }); } Comment puis-je envoyer d'accusé de réception?

    OriginalL'auteur MA-Maddin

  3. 1

    En outre, le VithuBati la réponse dont vous avez besoin pour l'installer:

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

    Donc, je dois courir la deuxième cmd trop? Le "SocketIOClient.Socket" espace de noms n'est pas trouvé dans mon projet...
    Yep. la seconde est nécessaire.

    OriginalL'auteur David Dehghan