微信号器

Vue3 插件, 将信号R 和提供者的打字更严格 .

安装

安装此软件包和信号端依赖

$ yarn add @dreamonkey/vue-signalr @microsoft/signalr

应用提供 a 的插件 HubConnection 实例

import { VueSignalR } from "@dreamonkey/vue-signalr";
import { HubConnectionBuilder } from "@microsoft/signalr";
import { createApp } from "vue";
import App from "./App.vue";

// Create your connection
// See https://docs.microsoft.com/en-us/javascript/api/@microsoft/signalr/hubconnectionbuilder
const connection = new HubConnectionBuilder()
  .withUrl("http://localhost:5000/signalr")
  .build();

createApp(App).use(VueSignalR, { connection }).mount("#app");

使用量

import { useSignalR } from "@dreamonkey/vue-signalr";
import { inject } from "vue";

export default {
  setup() {
    const signalr = useSignalR();

    signalr.invoke("SendMessage", { message });

    signalr.on("MessageReceived", ({ message }) => {
      /* do stuff */
    });
  },
};

虽然SignalR没有区分客户端和服务器端的方法,但是在这个包中我们把前者称为"Events",而后者称为"Commands".

命令可以使用 signalr.invoke(),而事件可以启用或禁用 signalr.on() 财务报告和审定财务报表 signalr.off()

取消订阅

所有事件您创建一个用于使用的收听器 signalr.on() 在不再使用时必须取消订阅,以避免内存出漏和异常的代码行为. 如果你打电话 signalr.on() 在Vue部分内 setup 范围,听众将被自动禁用 onBeforeUnmount 钩. 可以通过 autoOffInsideComponentScope 插件选项 .

如果您禁用它, 或者您在组件范围外启动一个听器, 您需要手动解禁它 signal.off() 和提供 相同的收听器函数引用 对它. 不提供它会将所有听众从提供的事件中移除

const messageReceivedCallback = (message) => console.log(message.prop);

signalr.on("MessageReceived", messageReceivedCallback);

signalr.off("MessageReceived", messageReceivedCallback); // Remove this listener
signalr.off("MessageReceived"); // Remove all listeners on `MessageReceived` event

类型安全

命令和事件名称及有效载荷通过专用接口的类型的增强加以登记(SignalREvents 财务报告和审定财务报表 SignalRCommands改为: @dreamonkey/vue-signalr 范围. 这些类型后来用于提供自动补全.

软件包也使用纯字符串, 您不需要注册命令/ 事件打字

import "@dreamonkey/vue-signalr";

interface MessageReceivedPayload {
  message: string;
}

interface SendMessagePayload {
  message: string;
}

declare module "@dreamonkey/vue-signalr" {
  interface SignalREvents {
    // Define an event, its payload is a single parameter of type `MessageReceivedPayload`
    MessageReceived: MessageReceivedPayload;
    // Define an event, its payload is composed by 0 or more parameters of type `MessageReceivedPayload`
    MultipleMessagesReceived: MessageReceivedPayload[];
    // Define an event, its payload is composed by exactly 2 parameters of type `MessageReceivedPayload`
    TwoMessagesReceived: [MessageReceivedPayload, MessageReceivedPayload];
    // Define an event with no payload
    MainTopicJoined: false;
  }

  interface SignalRCommands {
    // Define a command and its payload
    SendMessage: SendMessagePayload;
    // Define a command with no payload
    JoinMainTopic: false;
  }
}

方法再规划

如果您需要重新绘制命令或事件名称, 您可以使用 remapMethod 或者说 remapMethods 帮助者

import { remapMethod } from "@dreamonkey/vue-signalr";

remapMethod("receiveMessageWithStrangeMethodName", "MessageReceived");

remapMethods([
  ["legacyTopic2Joined", "MainTopicJoined"],
  ["createNewMessage", "SendMessage"],
]);

处理错误

您可以对连接/重联错误作出反应, 提供 failFn 选项输入插件选项

import { VueSignalR } from "@dreamonkey/vue-signalr";
import { createApp } from "vue";
import App from "./App.vue";

const connection = new HubConnectionBuilder()
  .withUrl("http://localhost:5000/signalr")
  .build();

createApp(App)
  .use(VueSignalR, {
    connection,
    failFn: () => {
      /* do stuff */
    },
  })
  .mount("#app");

今后可能采取的步骤

• 从其他帮助者那里获取灵感 https://socket.io/docs/v4/listing-to-events/ https://socket.io/docs/v4/listing-to-events/ 互联网档案馆的存檔,存档日期2014-12-21
• 从结尾处的其他特性取出灵感 https://socket.io/docs/v4/how-it-works/ 互联网档案馆的存檔,存档日期2014-12-22
• 添加房间加入/ 保留抽象( ?)

贷项

此软件包的灵感来自 https://github.com/quangdaon/vue-signalr (中文(简体) )