I am using Angular Cli as my front end, I can send messages from my front-end via Websockets and the backend server received and correctly interprets the message. However, I cannot seem to send messages from my backend server and have them be received from my Angular client, as when I console.log the data returned from the backend, it returns an empty observable. The code for my webservice, appmodule, and backend are below:
Webservice
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Socket } from 'ngx-socket-io';
import { map } from 'rxjs/operators';
@Injectable({providedIn: 'root'})
export class WebService {
Hello, I am using this example for my backend Python flask server: https://github.com/josharnoldjosh/simple-flask-socketio-example/blob/master/run.py,
I am using Angular Cli as my front end, I can send messages from my front-end via Websockets and the backend server received and correctly interprets the message. However, I cannot seem to send messages from my backend server and have them be received from my Angular client, as when I console.log the data returned from the backend, it returns an empty observable. The code for my webservice, appmodule, and backend are below:
Webservice
import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; import { Socket } from 'ngx-socket-io'; import { map } from 'rxjs/operators';
@Injectable({providedIn: 'root'}) export class WebService {
constructor(public http: HttpClient, private socket: Socket) {}
data: any;
sendMessage(msg: string) { this.socket.emit('message', msg); }
getCurrentTemperature() {
}
getHistoricTemperaturValues(pNum: number, pSize: number) {
return this.http.get('http://127.0.0.1:5000/api/v1.0/prevTempData?pn=' + pNum + '&ps=' + pSize) }
getTemperatureChartData() { return this.http.get('http://127.0.0.1:5000/api/v1.0/chartTemperatureData') }
getCurrentTelemetryData() {
return this.http.get('http://127.0.0.1:5000/api/v1.0/currentTelemetryValues') }
getCurrentTelemetryStrings() {
return this.http.get('http://127.0.0.1:5000/api/v1.0/charttemp') }
}
App Module
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { temperatureComponent } from './temperature.component'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { WebService } from './web.service'; import { HttpClientModule } from '@angular/common/http'; import { RouterModule } from '@angular/router'; import { navigationComponent } from './navigation.component'; import { AuthModule } from '@auth0/auth0-angular'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatPaginatorModule } from '@angular/material/paginator'; import { NgxGaugeModule } from 'ngx-gauge'; import { FlexLayoutModule } from '@angular/flex-layout'; import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
const config: SocketIoConfig = { url: 'http://localhost:5000', options: {} };
var routes: any = [ { path: '', component: temperatureComponent },
];
@NgModule({ declarations: [ AppComponent, temperatureComponent, navigationComponent,
imports: [ BrowserModule, AppRoutingModule, HttpClientModule, MatPaginatorModule, RouterModule.forRoot(routes), AuthModule.forRoot( { domain:'dev-6y0wwm-n.us.auth0.com', clientId:'eL6gz5I8clAvEJqamidTlJGWygl7v1eg' }), BrowserAnimationsModule, NgxGaugeModule, FlexLayoutModule, SocketIoModule.forRoot(config)
], providers: [WebService], bootstrap: [AppComponent] }) export class AppModule { }
Python Flask backend
` from flask import from flask_socketio import from flask_cors import CORS import eventlet import gevent
async_mode = 'eventlet'
app = Flask(name) CORS(app) app.config['SECRET_KEY'] = 'some super secret key!' socketio = SocketIO(app, cors_allowed_origins='*', logger=True, async_mode=async_mode)
@app.route('/') def root():
return "Hello world!"
@app.route('/random') def random():
from random import randint
html = str(randint(1, 100)) return html
@app.route('/user/')
def user_id(id):
return str(id)
@app.route('/html/')
def html(username):
return render_template('index.html', username=username)
@socketio.on('message_from_server')
def message_recieved(data): print(data['text']) emit('message_from_server', {'text':'Message recieved!'})
if name == 'main': """ Run the app. """
socketio.run(app, port=5000, debug=True) `