How to update the SignalR JavaScript library to the latest version

C#/XAML for HTML5 edited this page Aug 17, 2017 · 2 revisions

How to update the SignalR JavaScript library to the latest version:

Introduction

The SignalR CSHTML5 library contains the JavaScript-based SignalR library. It is located in the project "CSHTML5.Extensions.SignalR.Client" and it is named "bundle.js".

This "bundle.js" file was created using the SignalR sources available on GitHub. Those sources have been transformed in order to be able to run in the browser in a single JS file.

This document explains how to re-create the file "bundle.js" from the SignalR sources available on GitHub.

A - SET UP

  1. Install Node.js if you haven't already. You can download the installer from:

https://nodejs.org/en/download/

  1. Download the files "signalR.js" and "jQueryShim.js" from the following repository:

https://github.com/DVLP/signalr-no-jquery

Here are direct links:

B - Use "BABEL" to convert from Ecmascript 6 to Ecmascript 5 for better browser compatibility:

  1. Download the "node-babel-static-demo" repository from the following URL:https://github.com/rauschma/node-babel-static-demo To do so, click "Clone or download"->"Download ZIP". Extract it to a folder on your disk, for example "C:\Temp"

  2. Launch the "Node.js command prompt" from the Start Menu

  3. Navigate to the folder where you have extracted the repository at Step B-1. For example, type:

cd C:\temp\node-babel-static-demo-master

  1. Install the Node.js package by running the following command:

npm install

  1. Copy the files "signalR.js" and "jQueryShim.js" (which you have downloaded at Step A-2) to the ES6 folder that is inside the "node-babel-static-demo-master" folder. Make sure to delete any other JS files that may be present in that "ES6" folder, such as "MyApp.js".

  2. Build by executing the following command in the Node.js command prompt:

npm run build

The output files are located in the "ES5" folder.

  1. Delete the files "*.map" that are located in the "ES5" folder because they will not be used.

C - Use "BROWSERIFY" to create a bundle that allows to use the libraries in the browser environment:

  1. Install "Browserify" by launching the "Node.js Command Prompt" and executing the following command:

npm install -g browserify

  1. Install "jquery-deferred" and "jquery-param" by launching the "Node.js Command Prompt" and executing the following commands:
  • npm install jquery-deferred
  • npm install jquery-param
  1. Go to the "ES5" folder and create a file named "entrypoint.js" with the following content:
`'use strict'`
var _signalRNoJquery = require('./signalR.js');`
`module.exports={signalRNoJquery:_signalRNoJquery}`
  1. Navigate to the "ES5" folder and execute the following command in the "Node.js Command Prompt":

browserify entrypoint.js --standalone signalRNoJQueryBundle > bundle.js

  1. The file "bundle.js" will be created in the "ES5" folder. This is the output file that is used in the CSHTML5 SignalR project. You now need to patch the output "bundle.js" file in the following way:

FIND THE FOLLOWING LINE:

   `request.open(options.type, options.url);`

ADD THE FOLLOWING CODE BEFORE:

   `if (options.type === "GET" && options.data.data) options.url += '&data=${options.data.data}';`

That's all. You can now copy the resulting file "bundle.js" into the CSHTML5 SignalR project and replace the existing one.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.