Reputation: 974
I'm trying to use signalR in ionic 2 app .For signalR im using ms-signalr-client library.
Index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4e8ef7">
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="build/main.css" rel="stylesheet">
</head>
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<script src="build/main.js"></script>
<!-- The bundle js is generated during the build process -->
<!-- Zone.js and Reflect-metadata -->
<script src="build/js/Reflect.js"></script>
<script src="build/js/zone.js"></script>
<!--Below added jquery and signal-->
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../jquery.signalR.js"></script>
</body>
</html>
Using here
import { Injectable } from '@angular/core';
import $ from 'jquery';
import 'ms-signalr-client';
import 'rxjs/Rx';
@Injectable()
export class SignalRService {
connection: hubConnection;
hubProxy:any;
constructor() {
}
startConnection() {
console.log("Stage 1");
this.connection =$.hubConnection('http://192.168.0.213:9000');//Server Deployed
console.log("Stage 2");
this.hubProxy = this.connection.createHubProxy('broadcaster');
console.log("Stage 3");
this.connection.start({ jsonp: true })
.done(() => {
console.log('Now connected, connection ID=' + this.connection.id);
})
.fail((err) => {
console.log('Could not connect');
});
}
}
But this error appear every time. I have search but didn't find any solution.
Uncaught Error: jQuery was not found. Please ensure jQuery is referenced before the SignalR client JavaScript file.
Note: I have tired this library as well but it has an issue .
Issue:Ionic 2 signalr is not connecting with hub
Upvotes: 0
Views: 1582
Reputation: 130
The only way I get it to work is by adding such code to the top of a vendors file:
import 'expose-loader?$!expose-loader?jQuery!jquery';
import './node_modules/signalr/jquery.signalR.min.js';
jQuery should be available globally through aliases that's why I use explose-loader import together with ProvidePlugin in webpack config:
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
Please note, you can use jQuery version 2 or above for signalR.
Hope this will help.
Upvotes: 0
Reputation: 974
In reference to this Ng2-signalr .I just copy code and its working fine now .
import 'expose-loader?jQuery!jquery';
import '../node_modules/signalr/jquery.signalR.js';
Upvotes: 2