I stuck in loading SignalR in my vuejs application, I have included the CDN but wont be able to load the library
output: signalR mounted undefined
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue CDN</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-toastify@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@microsoft/signalr@5.0.3/dist/cjs/index.min.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<global-component ></global-component>
</div>
</body>
<script>
Vue.use(window['vue-toastify'].default);
Vue.component('global-component', {
data: function () {
return {
message: `I'm from Global`,
connection: null,
}
},
mounted() {
console.log('vue-toastify', window['vue-toastify']);
console.log('Signalr mounted', window['signalR']); // output : Undefined
var signalR = window.signalR;
try {
this.connection = new signalR.HubConnectionBuilder()
.withUrl("https://ab.xyz.com/signalhub/", {})
.withAutomaticReconnect()
.build();
console.log('Signalr Connection', connection);
} catch (error) {
console.error('SignalR error ', error)
}
this.$vToastify.success('Mounted...');
},
template: `
<div> Hey.... {{message}} </br> </div>
`,
components: {},
methods: {}
});
const myVueInstance = new Vue({
el: "#app"
})
</script>
</html>
any help will much be appreciated
To use SignalR from CDN in the browser, use the browser build (you're currently using the CommonJS build):
https://cdn.jsdelivr.net/npm/@microsoft/signalr@5.0.3/dist/browser/signalr.min.js
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> <script src="https://cdn.jsdelivr.net/npm/vue-toastify@latest"></script> <script src="https://cdn.jsdelivr.net/npm/@microsoft/signalr@5.0.3/dist/browser/signalr.min.js"></script> <div id="app"> <global-component ></global-component> </div> <script> Vue.use(window['vue-toastify'].default); Vue.component('global-component', { data: function () { return { message: `I'm from Global`, connection: null, } }, mounted() { console.log('Signalr mounted', window['signalR']); var signalR = window.signalR; try { this.connection = new signalR.HubConnectionBuilder().withUrl("https://ab.xyz.com/signalhub/", {}).withAutomaticReconnect().build(); console.log('Signalr Connection', this.connection); } catch (error) { console.error('SignalR error ', error) } this.$vToastify.success('Mounted...'); }, template: ` <div> Hey.... {{message}} </br> </div> `, }); const myVueInstance = new Vue({ el: "#app" }) </script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.