Структура приложения:
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 (). Я мог бы сделать это неправильно. Но я в растерянности здесь.
К вашему сведению: я новичок в розетках. Таким образом, помощь очень ценится.