在角度 6 中使用网络套接字

Question

我正在尝试从网络套接字获取数据。我正在将 websocket 对象初始化为全局对象。

socket =new WebSocket('ws://xx.xx.xx.xx:xxxx/socket');

在 ngOnInit 上，我正在打开连接：

this.socket.onopen = function(){
    console.log("websocket is open now");
  }

现在我需要使用从 UI 触发的函数发送消息，并且来自 websocket 的回复应该将消息存储在全局变量中。

sampleFunction(val) {
    this.socket.send(val);
    this.socket.onmessage=function(event){
      console.log("got message");
      this.dummy=event.data;
    }.bind(this)
  }

所以在页面加载时它正在连接，但是当我触发该功能时，消息没有发送，因此我没有收到任何回复

Answer 1

我正在使用 Angular 自带的 rxjs 及其 webSocket 方法。

import {webSocket} from 'rxjs/webSocket';
socket = webSocket(`${environment.serviceWebSockets}/api`);
constructor(){
    // now you can subscribe to messages wherever in your code
    this.socket.subscribe(message => {
        console.log(message); // or just use it directly
    }, error => {
        console.error(error); // handle errors
    });
}

通过这个 webSocket 发送数据：

socket.next(JSON.stringify({some:"data"}));

连接使用：

socket.subscribe();

断开连接：

socket.complete();

更多信息https://rxjs-dev.firebaseapp.com/api/webSocket/webSocket

Answer 2

实际上在 AngularCli 应用程序中，您可以定义这样的服务并开始连接到 Web 套接字服务器

 // websocket.servoce.ts
 import { Injectable } from "@angular/core";
 import { webSocket } from "rxjs/webSocket";


 @Injectable()
 export class WebsocketService {

   // ha ha look at the host address
   private subject = webSocket("ws://xxx.xxx.xxx.xxx:xxxx ;)/ws/");
   // use pipe to push data into components
   constructor() {
     console.log("websocket service initialization");
   }

   subscribe() {
     this.subject.subscribe(
       msg => {
         console.log(msg);
         // use angular data pipe to push data into components that is subscribed on pipe
       },
       err => {
         console.log(err);
       }
      )
   }

 }

感谢您使用此服务

Answer 3

我相信 RxJs 套接字期望有效负载是有效的 json，您是在发送字符串还是？