Websocket is undefined - in Vue-Native-Websocket

487 views Asked by At

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.

0

There are 0 answers