DVLP / signalr-no-jquery

120 stars 78 forks source link

Please update the usage instructions with an example for "traditional" HTML without Babel/ES6 Modules #55

Open daiplusplus opened 4 years ago

daiplusplus commented 4 years ago

(I'd like to preface this post with a huge "thank you" for recently updating the library for SignalR 2.4.1 - that was only a few hours ago!)


In the old world, using the original SignalR client library is straightforward:

  1. Ensure you have jquery-2.2.4.min.js and jquery.signalr.2.4.1.js in your /scripts/ directory.
    • These files are automagically added to your project when you add the SignalR NuGet packages.
  2. Open your HTML file or template (e.g. Site.master, _Layout.cshtml, index.html, etc).
  3. Add this to your <head>:

    <script type="text/javascript" src="/scripts/jquery-2.2.4.min.js"></script>
    <script type="text/javascript" src="/scripts/jquery.signalr.2.4.1.js"></script>
    <script type="text/javascript" src="/signalr/hubs"></script>
  4. Add another <script> below that which then uses $.connection et cetera.

Now, I'm needing to use signalr-no-jquery in a project that doesn't have an existing JavaScript build process (beyond MSBuild/Visual Studio's built-in TypeScript compilation) and I'm stuck.

I was under the impression that signalr-no-jquery is a drop-in replacement for both jquery-2.2.4.min.js and jquery.signalr.2.4.1.js, but when I did npm install --save signalr-no-jquery@0.2.0 I saw that the node_modules/signalr-no-jquery/build directory contained 2 files:

and when I looked inside of those files, I saw they were both used require(), module.exports, and Object.defineProperty(exports, "__esModule" ), { etc } which means I can't use these files directly in a web-page (I think? please correct me if I'm wrong). And why is jQueryShim.js a separate file? I thought the whole point of signalr-no-jquery was that the jQuery shim is embedded within the signalr-no-jquery script file?

the documentation page says to just use import { hubConnection } from 'signalr-no-jquery, but I can't do that because:

So how do I actually use signalr-no-jquery with a traditional SSR web-application without a JavaScript build process?

I just want something like this:

    <script type="text/javascript" src="/scripts/signalr-no-jquery.min.js"></script>
    <script type="text/javascript" src="/signalr/hubs"></script>