ReactNative中使用WebSocket

大风起兮云飞扬丶

已于 2022-11-03 11:02:23 修改

阅读量2.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript ReactNative 文章标签： javascript websocket

于 2022-04-27 17:37:17 首次发布

本文链接：https://blog.csdn.net/weixin_45932565/article/details/124452541

JavaScript 同时被 2 个专栏收录

35 篇文章

订阅专栏

ReactNative

7 篇文章

订阅专栏

这篇博客通过一个生动的遥控炸弹的例子解释了发布订阅模式，展示了如何使用WebSocket进行实时通信。文中介绍了NetManager类，用于管理WebSocket连接，并通过MessageProcess类处理消息监听和回调。在应用启动时初始化网络连接，发送消息并等待响应，体现了发布订阅模式在通信中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先说说发布订阅这种设计模式，这种模式我给它起了个别名叫遥控炸弹。很多朋友理解不了这种模式，那——

举个例子：
张三是个法外狂徒，它要去复仇，他想去炸掉仇家的房子。他来到仇家所在的小区，拿出自己准备的炸弹（监听）丢进仇家的屋里（页面），等他走出小区立马掏出遥控器（emit）按下爆炸按钮，复仇成功。

注意： 以上例子你可能会误解为炸弹只能爆炸一次，其实炸弹可以一直存在房子里，只要你不将他清理掉。所以张三完成复仇后，他应该去把炸弹清理掉，免得一直在屋子里，容易被警方发现。每个炸弹还应该有自己的名字（key），按爆炸开关的时候就可以精确引爆了。

export default class WSNetwork {
  constructor(msgHandler) {
    this.init();
    this.msgHandler = msgHandler;
  }

  init() {
    this.wssocket = null;
    this.serverUrl = "ws://127.0.0.1:3000/websocket";
  }

  connect() {
    this.wssocket = new WebSocket(this.serverUrl);

    this.wssocket.onopen = this.onOpen.bind(this);
    this.wssocket.onclose = this.onClose.bind(this);
    this.wssocket.onerror = this.onError.bind(this);
    this.wssocket.onmessage = this.onMessage.bind(this);

  }

  //打开连接
  onOpen() {
    console.log("WS_OPEN")
  }

  //关闭连接
  onClose() {
    console.log("WS_CLOSE")
  }

  //连接出错
  onError(e) {
    console.log("WS_ERROR::", e)
  }

  //接收消息
  onMessage(event) {
    this.msgHandler(event);
  }
}

const WS_LISTENER = 'WS_LISTENER'

export default class MessageProcess {
  static httpCallbacks = {}
  
  static msgListener = {}
  
  static addMsgListener(serviceId, callBack) {
    this.msgListener[serviceId] = callBack;
  }

  static emitData(msg) {
    this.msgListener[WS_LISTENER](msg)
  }

  static msgHandler(msg) {
    MessageProcess.emitData(msg)
  }

  static addHttpCallback(key, cbObj) {
    MessageProcess.httpCallbacks[key] = cbObj
  }


  static initListener() {
    MessageProcess.addMsgListener(WS_LISTENER, MessageProcess.onHttpCallBack)
  }


  static onHttpCallBack(msg) {
    const key = msg.key
    const callData = MessageProcess.httpCallbacks[key]

    callData.callback(msg)

    delete MessageProcess.httpCallbacks[key]
  }
}

import WSNetwork from "./WSNetwork";
import MessageProcess from "./MsgProcess";

export default class NetManager {
  static network = null
  static msgId = 1

  //初始化网络(在应用启动时调用)
  static initNetwork() {
    NetManager.network = new WSNetwork(MessageProcess.msgHandler);
    NetworkManager.network.connect();
    MessageProcess.initListener();
  }

  //想server发送消息,应把NetManager.msgId传过去，server返回数据时再返回
  static sendMsg(msg) {
    return new Promise((resolve, reject) => {
      NetManager.network.wsSendMsg(msg)

      MessageProcess.addHttpCallback(NetManager.msgId++, {
        callback: (data) => {
          resolve(data)
        }
      })
    })
  }
}