Socket.io в ExpressJS с Angular в качестве клиента внутри приложения Electron - PullRequest
0 голосов
/ 23 января 2020

Структура приложения:

Front End - Angular 8 (8,3), который находится внутри приложения Electron. Back End - ExpressJS (4.16)

Цель - Предположим, заказ размещен по маршруту express. Я должен иметь возможность отправлять эти детали заказа подключенным клиентам через сокеты, то есть получать данные в реальном времени.

То, что я пробовал до сих пор.

Express Backend

socket_test_1. js

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

function send_data(data) {

    io.on('connection', socket => {
        console.log("sadas");
        socket.emit('hello', {
            message: 'Hello World asdas', id: socket.id, data: data
        });
    });
    return io;
}

module.exports.listen = send_data;

socket_test_0. js

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

module.exports.listen = function (app) {
    io.listen(3001);
    var socket1;
    io.on('connection', (socket) => {
        socket1 = socket.id;
        socket.emit('hello', {
            message: 'Hello World asdas', id: socket.id
        });
        socket.on('hi', msg => {
            console.log('just got: ', msg);
            socket.emit('chat message', 'hi from server1');

        });
        socket.on('new', msg => {
            console.log('just got: ', msg);
            console.log();
            io.to(socket.id).emit('chat message', 'hi from server');

        });
    });

    return io;
};

приложение. js

var send_data = require('../socket/socket_test_1');

var socket_test = require('./routes/socket/socket_test_0').listen(app);
router.get('/io',(request, response) => {
    send_data.listen(request.query.data);
    response.send({"asd": "asd"});
});

Angular

socketservice.ts

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

@Injectable()
export class SocketService {

  observable: Observable<string>;
  socket;
  socket1;

  constructor() {
    this.socket = io('http://192.168.1.103:3001');   
    this.socket1 = io('http://192.168.1.103:3002');     
   }

   getData(): Observable<string> {
    return this.observable = new Observable((observer) => 
      this.socket.on('chat message', (data) => observer.next(data))
    );
  }

  getData1(): Observable<string> {
    return this.observable = new Observable((observer) => 
      this.socket1.on('hello', (data) => observer.next(data))
    );
  }

  // This one is for send data from angular to node 
  pushData(e) {
    this.socket.emit('hi', e);
  }
  newData(e) {
    this.socket.emit('new', e);
  }
}

Dashboard.compon enet .ts

export class DashboardComponent implements OnInit {

  constructor(private service: DashboardService, private socket: SocketService) { }
  title = 'app';
  incomingmsg = [];
  msg = 'First Protocol';
  store;
  type_login;
  ngOnInit() {
    this.socket
      .getData()
      .subscribe(msg => {
        console.log('Incoming msg', msg);
      });

      this.socket
      .getData1()
      .subscribe(msg => {
        console.log('Incoming msg from api call', msg);
      });
    this.sendMsg(this.msg);
  }
  sendMsg(msg) {
    console.log('sdsd', msg);
    this.socket.pushData(msg);
    this.socket.newData("adsasddasdasd");
  }
}

Проблема

Если и только если я перезагружусь, я могу получить свои сообщения сокета. Как вы видете. Я знаю, что я вызываю getData () для ngOnInit (). Я мог бы сделать это неправильно. Но я в растерянности здесь.

К вашему сведению: я новичок в розетках. Таким образом, помощь очень ценится.

enter image description here

enter image description here

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...