Сервис углового чата Socket IO Node

Question

Я пишу о ситуации, с которой я столкнулся при реализации руководства, которое я нашел в Интернете: https://codingblast.com/chat-application-angular-socket-io/

Это работало хорошо.Мне удалось подключиться к серверу узла при переходе к нужному компоненту на моем веб-сайте.Большая часть кода, который я собираюсь опубликовать, очень похожа на то, что я нашел на веб-сайте.

Кроме того, я дошел до того, что смог увидеть «запущен на порту: 3000» и «пользователь»подключен "Это работает.Но я не могу отправлять сообщения на сервер.

Вот файл, в котором, как мне кажется, возникает проблема:

index.js

let express = require('express');
let app = express();

let http = require('http');
let server = http.Server(app);

let socketIO = require('socket.io');
let io = socketIO(server);

const port = process.env.PORT || 3000;

io.on('connection', (socket) => {
  console.log('user connected');

  socket.on('new-message', (message) => {
    console.log(message);
  });
});

server.listen(port, () => {
  console.log(`started on port: ${port}`);
});

chat.componenet.html

<div class="main-container--chat">
  <div class="message-box-container">
    <div *ngFor="let message of messages">
      {{message}}
    </div>
  </div>

  <div class="chat-input">
    <input [(ngModel)]="message" (keyup)="$event.keyCode == 13 && sendMessage()"/>
    <button (click)="sendMessage()">Send</button>
  </div>
</div>

chat.component.ts

export class ChatComponent implements OnInit {
  message: string;
  messages: string[] = [];

  constructor(private chatService: ChatService) {
  }

  ngOnInit() {
    this.chatService
      .getMessages()
      .subscribe((message: string) => {
        this.messages.push(message);
      });
  }

  sendMessage() {
    this.chatService.sendMessage(this.message);
    this.message = '';
  }
}

и наконец chatService.service.ts

 export class ChatService {
      private url = 'http://localhost:3000';
      private socket;

      constructor() {
        this.socket = io(this.url);
      }

      public sendMessage(message) {
        this.socket.emit('new-message', message);
      }

      public getMessages = () => {
        return 

    Observable.create((observer) => {
      this.socket.on('new-message', (message) => {
        observer.next(message);
      });
        });
      }
    }

Я сделал все возможное, чтобы сохранить размещенный код конкретным.Я надеюсь, что это не слишком много, чтобы смотреть на.Особенно в пятницу.

Но, опять же, при запуске index.js через Node.Я могу видеть, что "пользователь подключен" и этот порт: 3000 запущен.Но когда я отправляю сообщение, сервер никогда не получает его.Также, когда я пытаюсь сохранить console.log («somethign random»);внутри:

  socket.on('new-message', (message) => {
    console.log(message);
  });

Я не вижу случайного сообщения консоли.Я не думаю, что мое имя неправильно для нового сообщения.

Я новичок в этом, поэтому я надеюсь, что это не что-то очевидное.Буду очень признателен за любую помощь.

Редактировать: перезапустил сервер и заставил регистрацию работать.Но весь код остается прежним и добавляет

io.emit(message);

к

  socket.on('new-message', (message) => {
    console.log(message);
  });

Я все еще не получаю сообщения в html.

Answer 1

Вам необходимо дополнительно отправить / передать событие new-message с полезной нагрузкой строкового сообщения на сервере, используя emit на io, в частности io.emit('new-message', message), в сокете socket.on('new-message', (message) => { }).Таким образом, клиент, подключенный к этому сокету, может получать события new-message в наблюдаемом потоке.

io.on('connection', (socket) => {
  console.log('user connected');

  socket.on('new-message', (message) => {
    console.log(message);
    io.emit('new-message', message); // emit event
  });
});

Вам не нужно вносить какие-либо изменения в свой код Angular / client.Просто не забудьте реализовать какой-то вид наблюдаемого, используя что-то вроде complete() в теле complete() или операторы завершения / фильтрации, такие как takeUntil .В противном случае вы можете / будете иметь потенциальные утечки памяти.

Надеюсь, это поможет!