Я запускаю сервер узлов на порту 3000 и угловое приложение на порте 4200. Я пытаюсь отправить данные через веб-сокеты с клиента на сервер для сервера.Отправка данных с сервера на клиент через веб-сокеты работает.На снимке экрана показана моя угловая информация CLI на сервере узла рядом с браузером, отправляющим сообщения на сервер.
Браузер регистрирует информацию, отправляемую на сервер (chat.service.ts: 22).Я присоединяюсь к этому массиву, так что для упрощения отправляется строка (chat.service.ts: 23)
Сервер получает socket.on ('new-message') от клиента, а затем регистрирует данныеполучено.К сожалению, это пустая строка, отмеченная пробелом, созданным console.log (data).Слово «строка» происходит из console.log (typeof (data))
Я включил файл websocket.service.ts, но на самом деле я не уверен, уместен ли он или даже использую его.Я новичок в веб-сокетах и сервисах в угловых и угловых по всем, поэтому я все еще пытаюсь обдумать, как сервисы работают в угловых.
Приветствия,
[Изображение показывает узелсервер на локальном хосте: 3000, а также вывод консоли клиента image
server.js:
const express = require('express');
const bodyParser = require('body-parser');
const http = require('http');
let socket = require('socket.io’);
// Parsers
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false}));
const app = express();
const server = http.createServer(app);
let io = socket(server);
//Set Port
const port = process.env.PORT || '3000';
app.set('port', port);
io.on('connection', function(socket){
console.log('made socket connection', socket.id);
socket.on('new-message', function(data) {
console.log(data);
io.sockets.emit('new-message', data);
console.log(typeof(data));
});
});
websocket.service.ts:
import { Injectable } from '@angular/core';
import * as io from 'socket.io-client';
import { Observable } from 'rxjs/Observable';
import * as Rx from 'rxjs/Rx';
import { environment } from '../environments/environment';
@Injectable()
export class WebsocketService {
// Our socket connection
private socket;
constructor() { }
connect(): Rx.Subject<MessageEvent> {
this.socket = io(localhost:3000);
let observable = new Observable(observer => {
this.socket.on('new-message', function(data){
console.log("Received message from Websocket Server")
observer.next(data);
})
return () => {
this.socket.disconnect();
}
});
// We define our Observer which will listen to messages
let observer = {
next: (data: Object) => {
this.socket.emit('message', JSON.stringify(data));
},
};
return Rx.Subject.create(observer, observable);
}
}
chat.service.ts:
import * as io from 'socket.io-client';
import { Observable } from 'rxjs/Observable';
import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
import { map } from "rxjs/operators";
@Injectable({
providedIn: 'root'
})
export class ChatService {
private url = 'http://localhost:3000';
private socket;
result:any;
constructor(private _http: Http) {
this.socket = io(this.url);
}
public sendMessage(messageArray) {
console.log('message array is now:')
console.log(messageArray);
this.socket.emit('new-message', messageArray.join('-'));
}
public loadPreviousMessages() {
return this._http.get("http://localhost:3000/api/messages")
.pipe(map(result => this.result = result.json().data));
}
public getMessages = () => {
return Observable.create((observer) => {
this.socket.on('new-message', (messageArray) => {
observer.next(messageArray);
});
});
}
}