c++ - Angular 8 上的 Websocket 客户端和 C++ 控制台中的服务器

Question

我正在尝试使用 websockets 将我的 Angular 应用程序连接到 c++ 控制台应用程序。

我制作了一个 websocket 服务器作为 c++ 控制台应用程序。代码如下：

#include <future>
#include <iostream>
#include "demo.h"

using namespace std;

int main()
{
    WSADATA wsa_data;
    SOCKADDR_IN server_addr, client_addr;

    WSAStartup(MAKEWORD(2, 2), &wsa_data);
    const auto server = socket(AF_INET, SOCK_STREAM, 0);

    server_addr.sin_addr.s_addr = INADDR_ANY;
    server_addr.sin_family = AF_INET;
    server_addr.sin_port = htons(5555);

    ::bind(server, reinterpret_cast<SOCKADDR*>(&server_addr), sizeof(server_addr));
    listen(server, 0);

    cout << "Listening for incoming connections..." << endl;

    int client_addr_size = sizeof(client_addr);

    for (;;)
    {
        SOCKET client;

        if ((client = accept(server, reinterpret_cast<SOCKADDR*>(&client_addr), &client_addr_size)) != INVALID_SOCKET)
        {
            auto fut = async(launch::async, on_client_connect, client);
        }

        const auto last_error = WSAGetLastError();

        if (last_error > 0)
        {
            cout << "Error: " << last_error << endl;
        }
    }
}

void on_client_connect(SOCKET client)
{
    char buffer[1024];

    cout << "Client connected!" << endl;
    recv(client, buffer, sizeof(buffer), 0);

    cout << "Client says: " << buffer << endl;
    memset(buffer, 0, sizeof(buffer));

    closesocket(client);
    cout << "Client disconnected." << endl;
}

然后我使用了这里的教程https://tutorialedge.net/typescript/angular/angular-websockets-tutorial/#:~:text=WebSockets%20in%20Angular,perfect%20for%20working%20with%20WebSockets。并制作了一个 WebsocketService 来连接我的 c++ 应用程序。代码如下：

import { Injectable } from "@angular/core";
import * as Rx from "rxjs/Rx";

@Injectable()
export class WebsocketService {
  constructor() {}

  private subject: Rx.Subject<MessageEvent>;

  public connect(url): Rx.Subject<MessageEvent> {
    if (!this.subject) {
      this.subject = this.create(url);
      console.log("Successfully connected: " + url);
    }
    return this.subject;
  }

  private create(url): Rx.Subject<MessageEvent> {
    let ws = new WebSocket(url);

    let observable = Rx.Observable.create((obs: Rx.Observer<MessageEvent>) => {
      ws.onmessage = obs.next.bind(obs);
      ws.onerror = obs.error.bind(obs);
      ws.onclose = obs.complete.bind(obs);
      return ws.close.bind(ws);
    });
    let observer = {
      next: (data: Object) => {
        if (ws.readyState === WebSocket.OPEN) {
          ws.send(JSON.stringify(data));
        }
      }
    };
    return Rx.Subject.create(observer, observable);
  }
}



import { Injectable } from "@angular/core";
import { Observable, Subject } from "rxjs/Rx";
import { WebsocketService } from "./websocket.service";

const CHAT_URL = "ws://localhost:5555/";

export interface Message {
  author: string;
  message: string;
}

@Injectable()
export class ChatService {
  public messages: Subject<Message>;

  constructor(wsService: WebsocketService) {
    this.messages = <Subject<Message>>wsService.connect(CHAT_URL).map(
      (response: MessageEvent): Message => {
        let data = JSON.parse(response.data);
        return {
          author: data.author,
          message: data.message
        };
      }
    );
  }
}

我在这里的一个组件中使用它：

import { Component, OnInit, ViewChild, ElementRef, OnDestroy } from '@angular/core';
import { ChatService } from 'src/app/chat.service';
import { WebsocketService } from "src/app/websocket.service";

@Component({
  selector: 'app-translations',
  templateUrl: './translations.component.html',
  styleUrls: ['./translations.component.scss'],
  providers: [WebsocketService, ChatService]
})
export class TranslationsComponent implements OnInit {

  constructor(private chatService: ChatService) {
    chatService.messages.subscribe(msg => {
      console.log("Response from websocket: " + msg);
    });
  }

  private message = {
    author: "",
    message: "this is a test message"
  };

  sendMsg() {
    console.log("new message from client to websocket: ", this.message);
    this.chatService.messages.next(this.message);
    this.message.message = "";
  }

  ngOnInit(){}


}

在我发送任何内容之前，我的客户端已断开连接，并且在控制台中我得到了这个：

控制台错误

有人在 C++ 控制台应用程序和 Angular 之间做过 websockets 吗？你能帮我解决这个话题吗？

谢谢

标签： c++websocket