javascript - angular 4でsocket.io-clientを使用する方法

Question

サーバー側は php laravel echo websocket で、Angular 4 で接続しようとしています。ng2-socket-io - npm と laravel-echo - npm を使用してみましたが、どれも成功しませんでした。誰かがドキュメントやチュートリアルの使い方を知っている場合は、助けてください

Answer 1

こんにちは @giga 実際の例を以下に示します。

設定

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

サーバー側 (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

私はそれが古い質問であることを知っています。私にとっては、どの解決策もうまくいかなかったので、以下のアプローチで解決しました。

ソケット接続のポーリングが正常に機能し、エラーが発生しない場合は、時間を無駄にしないでください。socket.io.client パッケージが他のセットアップと競合している可能性があります。

私のアプリケーションのバージョンは以下です。

Angular 12.x Socket.io.client 4.x Node 14.16.1 ngx-socket-io パッケージも試してみましたが、これも機能しませんでした。奇妙な部分は、socket.io ポーリングがうまく機能することです。ハンドシェイクは正しいですが、新しいメッセージでイベントをリッスンできません。

したがって、私の最終的なアプローチは、角度の index.html に socket.io を手動で追加し、コンポーネントにディスパッチとイベントを追加することです。

function RsCustomEvent ( event, message ) {
    params = { bubbles: false, cancelable: false, detail: message };
    var evt = document.createEvent( 'CustomEvent' );
    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
    return evt;
}
var socket = io('localhost:3000');
socket.on("channel-name", function (message) {
    window.dispatchEvent(RsCustomEvent('socketEventListen',message));

});

次に、以下のコードを使用した角度コンポーネントで。

 import { Observable , fromEvent} from 'rxjs';


fromEvent(window, 'socketEventListen').subscribe((data) =>{
 });

socket.io クライアント js ファイルを手動でダウンロードしてアセット フォルダーに配置し、上記のコードを使用します。