正文

如何在打字稿上重新连接（重新订阅）到 websocket

 2023-02-16  24

关键词：

【中文标题】如何在打字稿上重新连接（重新订阅）到 websocket【英文标题】：How reconnect (resubscribe) to websocket on typescript 【发布时间】：2018-07-21 17:06:34 【问题描述】：

我有一个 Ionic3 应用程序，它在某个视图上连接视图进入并订阅 websocket 可观察/观察者服务：

subscribtion: Subscription;


ionViewDidEnter() 
    this.subscribtion =  this.socket.message.subscribe(msg => 
    let configs = <Configs>msg.data 
    this.inputs = configs.inputs;
  );
  this.socket.message.next(this.enterMessage);

然后，在离开视图时，取消订阅：

ionViewWillLeave() 
  this.socket.message.next(this.quitMessage);
  this.subscribtion.unsubscribe();

但是如果我重新进入视图，它不会重新连接到 websocket。我该怎么做？

这里是socket和websocket.ts：

@Injectable()
export class SocketProvider 

public message: Subject<Message>;

  constructor(private socket: WebsocketProvider, @Inject('server') private server) 
    console.log('Hello SocketProvider Provider');
    let wsAddr = this.server.webSocketUrl();
    this.message = <Subject<Message>>socket
    .connect(wsAddr)
    .map((response: MessageEvent): Message => 
        let data = JSON.parse(response.data);
        return data;
    )
  

  


private subject: Rx.Subject<MessageEvent>;

public connect(url): Rx.Subject<MessageEvent> 
  if (!this.subject) 
    this.subject = this.create(url);
    //console.log('successfully Connnect: ' + url);
  
  return this.subject;


public 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);

【问题讨论】：

【参考方案1】：

我找到了解决办法：

我将 socket.ts 中构造函数中的代码移动到我在 IonViewEnter() 中调用的连接函数中并重新初始化 WebSocketProvider 对象：

constructor(private socket: WebsocketProvider, @Inject('server') private server) 
  console.log('Hello SocketProvider Provider');


connect() 
  console.log("try to connect eb socket");
  this.socket = new WebsocketProvider;
  let wsAddr = this.server.webSocketUrl();
  //let wsAddr = 'ws://192.168.0.110:8181';
  this.message = <Subject<Message>>this.socket
  //.connect('wss://echo.websocket.org')
  .connect(wsAddr)
  .map((response: MessageEvent): Message => 
    try 
      let data = JSON.parse(response.data);
      return data;
    catch(e) 
      alert(e);
      console.log("receive invalid JSON message: ");
      console.log(response.data);
    
  )

【讨论】：

如何在打字稿上制作多种类型的属性接口

】如何在打字稿上制作多种类型的属性接口【英文标题】：Howcanimakemultipletypepropertyinterfaceontypescript【发布时间】：2019-04-0312:23:14【问题描述】：我想在typescript中使用两个不同的接口创建接口属性。这可能吗？interfaceIPayload1id:stri... 查看详情

如何查看和修改请求订阅属性(sqlservermanagementstudio)

...中对订阅进行标记。有关启动复制监视器的信息，请参阅如何启动复制监视器（复制监视器）。将订阅标记为要重新初始化时，可以选择下列选项之一：使用当前快照选择此选项可在下次分发代理或合并代理运行时将当前快照应... 查看详情

vscode没有在vue文件中重新加载打字稿

】vscode没有在vue文件中重新加载打字稿【英文标题】：vscodenotreloadingtypescriptinvuefiles【发布时间】：2018-07-2418:17:45【问题描述】：我正在使用Vue（SFC简单文件组件）和使用vscode的打字稿。我在d.ts文件中创建的类型不会应用/更新... 查看详情

Rxswift 在事件发生时取消观察者并重新订阅

...间】：2018-10-0807:43:21【问题描述】：您好，任何人都知道如何在事件发生时取消observable并重新订阅（基本上我希望observable在另一个事件发生时跳过发射（取消按钮点击）详细场景：UISearchBar上点击取消按钮，点击取消按钮时如... 查看详情

取消订阅后将用户重新订阅到 MailChimp 列表

】取消订阅后将用户重新订阅到MailChimp列表【英文标题】：ResubscribeausertoaMailChimplistafterunsubscribe【发布时间】：2017-06-2819:09:36【问题描述】：我的网站允许用户通过DrupalMailChimp模块使用API订阅MailChimp列表。但是，如果用户通过电... 查看详情

如何在初始渲染后重新渲染自定义钩子

】如何在初始渲染后重新渲染自定义钩子【英文标题】：Howtore-renderacustomhookafterinitialrender【发布时间】：2022-01-0211:44:57【问题描述】：我有一个名为useIsUserSubscribed的自定义钩子，用于检查是否订阅了特定用户。如果用户已订阅... 查看详情

贝宝订阅重新激活计费日期

...解释PayPal订阅（或定期付款）在暂停付款然后重新激活时如何运作的信息。假设我通过ExpressCheckoutAPI开始订阅：从1月1日开始，每月10欧元。然后我在2月15日暂停订阅（我得到10欧元的1月和10欧元的2月）。假设我在5月1 查看详情

忽略打字稿上的“找不到模块”错误

】忽略打字稿上的“找不到模块”错误【英文标题】：Ignore"cannotfindmodule"errorontypescript【发布时间】：2016-09-1805:22:32【问题描述】：Typescript编译器能否忽略导入表达式中的cannotfindmodule\'x\'错误，例如：//Howtotellthecompilerthat... 查看详情

是否可以仅为打字稿上的特定类型扩展 Array.prototype？

】是否可以仅为打字稿上的特定类型扩展Array.prototype？【英文标题】：IsitpossibletoextendArray.prototypeonlyforaspecifictypeontypescript?【发布时间】：2018-06-1205:09:39【问题描述】：我有以下原型扩展，因为我一直在使用很多reduce：declareinterf... 查看详情

redis订阅断开后，怎么重新订阅

参考技术A驱动认为这是两个不同的Redis服务:--再启动一个Redis服务,另外占用一个端口.--做端口转发,或者本机做一个TCP代理.--分配给它不同的hostname(虽然各hostname指向同一个IP),使驱动保存两个pconnect产生的连接.或许,驱动层更应该... 查看详情

如何在 Socket.IO 中模拟连接失败

】如何在Socket.IO中模拟连接失败【英文标题】：HowtosimulateaconnectionfailureinSocket.IO【发布时间】：2011-11-0521:39:26【问题描述】：我正在开发一个应用程序，其中客户端通过Socket.io连接到nodejs服务器并订阅各种事件。这些订阅相当复... 查看详情

苗条打字稿上的苗条自定义事件

】苗条打字稿上的苗条自定义事件【英文标题】：Sveltecustomeventonsveltetypescript【发布时间】：2021-01-1517:56:45【问题描述】：我在我的svelte-typescript项目中使用clickOutside指令，当我将自定义事件分配给相关元素时出现此错误Type\'class... 查看详情

如何重新发出主题的最后一个值(代码片段)

我想将BehaviourSubject的最后一个值重新发送到现有订阅。我试过last()，publishlast()，share()，refcount()。但它不会使用最后一个发射值再次触发现有订阅。答案如果sub是您的BehaviorSubject，这将起作用：sub.next(sub.value) 查看详情

将套接字重新绑定到不同的接口

...描述】：是否有现有的Linux/POSIXC/C++库或示例代码来说明如何将套接字从一个物理接口重新绑定到另一个？例如，我在与物理连接A关联的套接字上进行ping传输，我想将该套接字重新绑定到物理连接B并继续在连接B上发送和接收ping... 查看详情

在android中重新启动应用程序时如何重新连接chromecast设备

】在android中重新启动应用程序时如何重新连接chromecast设备【英文标题】：Howtoreconnectchromecastdevicewhenrestartappinandroid【发布时间】：2016-05-3113:12:23【问题描述】：大家好，当我连接到chromecast设备并从后台删除应用程序然后再次打... 查看详情

无法重新声明块范围变量（打字稿）

】无法重新声明块范围变量（打字稿）【英文标题】：Cannotredeclareblockscopedvariable【发布时间】：2016-06-1523:26:26【问题描述】：我正在构建一个节点应用程序，并且在.js中的每个文件中习惯于在各种包中执行此操作。letco=require("co... 查看详情

如何重新配置平面文件连接管理器上的列信息？

】如何重新配置平面文件连接管理器上的列信息？【英文标题】：Howtoreconfigurethecolumninformationonaflatfileconnectionmanager?【发布时间】：2013-02-0515:56:03【问题描述】：我有一个从平面文件读取数据的平面文件源。我们最近在此平... 查看详情

当服务器连接丢失时，如何自行停止和重新启动客户端的服务？

】当服务器连接丢失时，如何自行停止和重新启动客户端的服务？【英文标题】：Whenserverconnectionislost,howtostopandrestartaserviceoftheclientonitsown?【发布时间】：2013-03-1409:12:37【问题描述】：这是我的代码的link。在服务上启动一个创建... 查看详情

正文