I am trying to implement a Websocket Client based android application using Vue-Native.
Websocket server is running on my local host(laptop). I am unable to make the Client connect to my server. I keep getting the error Websocket is undefined.
I am stuck at this problem for almost a week. Any guidance or help is appreciated.
--------------------- Code ----------------------------- App.vue File
<template>
<Page id="app">
<ActionBar title="VUe JS Websocket"></ActionBar>
<StackLayout>
<Label class="body m-20" :text="message" textWrap="true"></Label>
<Button class="btn btn-primary" @tap="sendMessage('hello')">Send Message</Button>
<Button class="btn btn-primary" @tap="createAndSend">Connect</Button>
</StackLayout>
</Page>
</template>
<script>
import Vue from 'vue'
import { mapActions, mapMutations } from 'vuex';
import { mapGetters } from 'vuex';
//import * as WebSocket from 'ws';
import VueNativeSock from 'vue-native-websocket'
//var NAME = eventBus.$on('user-name', (usrName) => usrName);
//var WSLink = 'ws://pm.tada.team/ws?name=' + NAME;
let WSLink = "ws://192.161.215.238:8000"
//const WebSocket = require('ws');
export default {
name: 'App',
data: function () {
return {
connection: null,
abc: null,
message: 'nothaaadf222ing'
}
},
methods: {
createAndSend() {
Vue.use(VueNativeSock, 'wss://echo.websocket.org/', { format: 'json' });
this.$socket.onopen = () => {
console.log('WebSocket opened');
this.message = 'Hi How Are'
// registering listeners
this.$socket.onmessage = (data) => console.log('Received data:', data.data);
// sending data
console.log('Sending data');
this.$socket.sendObj({awesome: 'data'});
}
},
},
created: function () {
console.log("Started")
this.message = this.$store.getters.messageVal;
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
---------------------- Code -----------------------------
Thanks in advance.