如何在发射成功时处理从 service.ts 到 component.ts 的 socket.io 确认 Angular 8

Question

When the client emits a new message to the server using socket.io, the server sends an acknowledgment of the newly created messageId with the callback fn(). I am able to log the messageId in the service.ts, but cannot figure out a way to "get" the messageId to the component.ts (in order to update the newly created message with an ID). with the way the code is set below, I get an angular error saying I cannot subscribe to this.appService.newMessage(), even though I am returning an Observable of the new message id with of(newMsgId) in service.ts. Pls lmk if I can add any more information to help

server.js
--------

socket.on('newStaffMessage', function (data, fn) {
    var msg = new Message({
      sender: data.senderId,
      content: { text: data.content.text, attachment: null },
      dateTime: new Date(),
    });

    msg.save((err, messageDoc) => {
      Conversation.findByIdAndUpdate(
        { _id: data.conversationId },
        {
          $push: { messages: messageDoc._id },
        },
        { new: true },
        function (err, convoDoc) {
          if (!err) {
            User.findById(data.senderId, function (err, userDoc) {
              const payload = {
                conversationId: convoDoc._id,
                _id: messageDoc._id,
                content: {
                  text: msg.content.text,
                  attachment: msg.content.attachment,
                },
                dateTime: msg.dateTime,
                sender: {
                  _id: userDoc._id,
                  firstName: userDoc.firstName,
                  lastNameInitial: userDoc.lastNameInitial,
                },
              };

              io.in(convoDoc._id).emit('newStaffMessage', payload);
              fn({messageId: messageDoc._id});
            });
          } else {
            console.log(err);
          }
        }
      );
    });
  });

service.ts
----------

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, Observer, of } from 'rxjs';
import * as io from 'socket.io-client';

@Injectable({
  providedIn: 'root',
})
export class AppService {
  private socket = io('http://localhost:3000');

  constructor(private http: HttpClient) {}

  newMessage(msg) {
    this.socket.emit('newStaffMessage', msg, (newMsgId) => {
      return of(newMsgId);
    });
  }

component.ts
------------
this.appService.newMessage(newMessage).subscribe(data => {
      console.log(data);
    })

Answer 1

You should properly convert handling socket.io event with callback to Observable .

I'd suggest you two options here:

1) Leverage Observable constructor or create operator with given subscription function:

import { Observable } from 'rxjs';
...
newMessage(msg) {
  return Observable.create(observer => {
    this.socket.emit('newStaffMessage', msg, (newMsgId) => {
      observer.next(newMsgId);
    });
  });
}

2) Use dedicated for such purposes RxJS bindCallback function:

import { bindCallback } from 'rxjs';

newMessage(msg) {
  return bindCallback(this.socket.emit)('newStaffMessage', msg);
}