jquery - 使用 SignalR 的 Angular 2 TypeScript

Question

我正在尝试设置 Angular 2 应用程序以使用 Microsoft 的 SignalR。我一直在关注this tutorial ，虽然这很好，但我不喜欢 jQuery 和 SignalR 通过 index.html 文件中的脚本标签加载到应用程序中，而且这两个库都不使用它们各自的类型定义。

考虑到这一点，我一直在尝试使用节点模块和相应的类型定义在我的应用程序中包含 jQuery 和 SignalR。我已经通过 Microsoft 的 TypeSearch 搜索了要使用的正确类型定义文件。 .

由于 SignalR 对 jQuery 的依赖，我只在我的应用程序中包含 jQuery。

jQuery

我首先开始在我的应用程序中安装 jQuery 模块，我也必须将其添加到 Webpack 配置中。设置完成后，由于 Protractor，我面临着“冲突”问题。这在 Aurelia JS Rocks' website 上有描述.虽然它建议卸载 Protractor 输入，但我现在尝试了另一个解决方案 described in this answer .我不知道这是否是最佳解决方案。

信号R

关于 SignalR，我有点困惑 - 到目前为止，似乎没有为 SignalR 提供“官方”节点模块。我不确定是否应该通过下载文件并将其包含在我的应用程序中来包含 Microsoft 的 SignalR Javascript 库。

问题是我已经安装了 SignalR 的类型定义。但是现在我不确定如何实际使用 SignalR，因为当我键入 $ 或 jQuery 时，系统不会提示我 .connections例如 - 这是有道理的，因为它不是 jQuery 库的一部分。

我敢肯定，在“设置”方面我可能误解了一些东西。在 Angular2 TypeScript 应用程序中使用 SignalR 的最佳方式是什么？

Answer 1

这是您可以使用的启动代码。

C#

//create an interface that contains definition of client side methods
public interface IClient
{
    void messageReceived(string msg);
}

//create your Hub class that contains implementation of client methods
public class ChatHub : Hub<IClient>
{
    public void sendMessage(string msg)
    {
        //log the incoming message here to confirm that its received

        //send back same message with DateTime
        Clients.All.messageReceived("Message received at: " + DateTime.Now.ToString());
    }
}

HTML

添加对 jQuery 和 signalR 的 script 文件的引用。

<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.signalR.min.js"></script>

<!--this is the default path where SignalR generates its JS files so you don't need to change it.-->
<script src="~/signalr/hubs"></script>

JS

您需要为 SignalR 和 jQuery 安装 TypeScript 定义文件。如果您使用的是 TypeScript 2，则在使用它时无需添加对 index.d.ts 文件的引用。只需使用以下命令安装类型即可。

npm install --save @types/jquery
npm install --save @types/signalr

完成所有设置后，您可以编写一个简单的 TypeScript 类 来处理发送和接收消息的逻辑。

export class MessageService {
    //signalR connection reference
    private connection: SignalR;
    
    //signalR proxy reference
    private proxy: SignalR.Hub.Proxy;


    constructor() {
        //initialize connection
        this.connection = $.connection;
        
        //to create proxy give your hub class name as parameter. IMPORTANT: notice that I followed camel casing in giving class name
        this.proxy = $.connection.hub.createHubProxy('chatHub');

        //define a callback method for proxy
        this.proxy.on('messageReceived', (latestMsg) => this.onMessageReceived(latestMsg));

        this.connection.hub.start();
    }
    
    private onMessageReceived(latestMsg: string) {
        console.log('New message received: ' + latestMsg);
    }

    //method for sending message
    broadcastMessage(msg: string) {
        //invoke method by its name using proxy 
        this.proxy.invoke('sendMessage', msg);
    }
}

我正在使用上面的代码，显然是根据我的需要修改的，并且运行良好。

---

更新 1:这是一个非常古老的答案，从那以后情况发生了很大变化。使用 npm 安装 jQuery 和 SignalR，然后使用 angular.json 文件加载它们，如下所示:

1- 安装 npm install jquery signalr

2- 加载 angular.json -> projects -> your-app -> architect -> build -> options

scripts: [
  "./node_modules/jquery/dist/jquery.min.js", 
  "./node_modules/signalr/jquery.signalR.min.js"
]

感谢并归功于 Robert's answer更新。