Wednesday, July 5, 2017

Getting signalR to work with the SharePoint framework

image

I’m creating a web part which will talk to a signalR back-end service for some document archiving with SharePoint. signalR on the client requires jQuery, which is the tricky part. I tried a few things without getting it to work, but turns out it’s not too hard to get working when you have Waldek Mastykarz on speed dial, so this post is mostly his work :)

First off you need to include signalR, and I picked the un-official npm package ms-signalr-client. Add it with:

npm i ms-signalr-client -save

I had already read Waldek’s post about how to include jQuery as an external reference, but it didn’t “just” work. This was the point where I called up Waldek.

By using Rencore’s script checker, we found out that signalR was a non-module, and that it requires jQuery to be available on the $ sign. To make this work I had to change the globalName reference in config.json of my SPFx project to $ instead of jQuery.

"externals": {
    "jquery": {
      "path": "https://code.jquery.com/jquery-2.1.1.min.js",
      "globalName": "$"
    }
}

and in my .tsx file I had to add the following imports:

import * as $ from 'jquery';
import 'ms-signalr-client';

I could now instantiate signalR as easy as pie in my code.

let connection = $.hubConnection(https://myserver/, { useDefaultPath: false });

2 comments:

  1. can you please show how to use signalR withing SPFx?

    ReplyDelete
    Replies
    1. It's the same as the regular samples. See the sample at https://www.npmjs.com/package/ms-signalr-client. If you have signalR working in another solution it's a straight forward port.

      Delete