данные, отправленные с клиента socket.io, недоступны на сокете сервера для отправки даже при регистрации события emit - PullRequest
0 голосов
/ 23 сентября 2018

Я запускаю сервер узлов на порту 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);
            });
        });
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...