# @dreamonkey/vue-signalr 中文文档

规范地址：https://npmcn.com/package/%40dreamonkey/vue-signalr/

版本：1\.2\.0
npm 元数据更新时间：2026-11-10T20:58:45.808Z
中文译文更新时间：2026-11-12T19:39:17.425Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40dreamonkey/vue-signalr
原文对照：https://npmcn.com/package/%40dreamonkey/vue-signalr/?lang=original
项目主页：https://github.com/dreamonkey/vue-signalr/blob/master/README.md
源码仓库：https://github.com/dreamonkey/vue-signalr

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：21.4 kB，27 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：vue ^3\.0\.0，@microsoft/signalr ^5\.0\.0 \|\| ^6\.0\.0 \|\| ^7\.0\.0 \|\| ^8\.0\.0
- 首次发布：2021-07-15T16:20:11.679Z
- 最新版本发布：2024-09-11T13:54:43.702Z
- 近 30 天下载量：13695（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：7（近 12 个月 0 个）

## 中文简介

Vue 3 的信号R插件

## 安装

```sh
npm install @dreamonkey/vue-signalr
```

也可以使用：`pnpm add @dreamonkey/vue-signalr`、`yarn add @dreamonkey/vue-signalr`、`bun add @dreamonkey/vue-signalr`

## README

# 微信号器

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

## 安装

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

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

应用提供 a 的插件 `HubConnection` 实例

```ts
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");
```

## 使用量

```ts
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()` 和提供 **相同的收听器函数引用** 对它. 不提供它会将所有听众从提供的事件中移除

```ts
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` 范围. 这些类型后来用于提供自动补全.

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

```ts
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` 帮助者

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

remapMethod("receiveMessageWithStrangeMethodName", "MessageReceived");

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

### 处理错误

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

```ts
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/listening-to-events/)
-   从结尾处的其他特性取出灵感 [https://socket.io/docs/v4/how-it-works/ 互联网档案馆的存檔,存档日期2014-12-22](https://socket.io/docs/v4/how-it-works/)
-   添加房间加入/ 保留抽象( ?)

### 贷项

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

## 常见问题

### @dreamonkey/vue-signalr 是什么？

Vue 3 的信号R插件

### 如何安装 @dreamonkey/vue-signalr？

在项目目录运行 npm install @dreamonkey/vue-signalr，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（^3\.0\.0）、@microsoft/signalr（^5\.0\.0 \|\| ^6\.0\.0 \|\| ^7\.0\.0 \|\| ^8\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @dreamonkey/vue-signalr 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @dreamonkey/vue-signalr 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @dreamonkey/vue-signalr 可以商用吗？

@dreamonkey/vue-signalr 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @dreamonkey/vue-signalr 的下载量有多少？

根据 npm 官方下载统计，@dreamonkey/vue-signalr 在 2026/10/13 – 2026/11/11 这 30 天内被下载 13,695 次，日均约 457 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @dreamonkey/vue-signalr 还在维护吗？

最新版本 1\.2\.0 发布于 2024/09/11（2 年前）；至今共发布 7 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/07/16。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。