working examples

[ralyodio]

Can we get some working examples. Both with and without using store?

[qq476649388]

may be.

[ralyodio]

would be helpful. I'd like to use this library but I cannot get it working so I wrote my own hack job.

[rianorie]

I would appreciate this too. I've put together a bare-bones test, but it's not sending anything to the websocket server on mutation, at this point I'm not even concerned with the server-side of things, but none of my attempts are working.

Am I wrong in assuming all dispatch and commit calls are automatically pushed to the websocket? And if I am wrong about that, how would I call the socket from a mutation?

For reference:

import Vue from 'vue'
import Vuex from 'vuex'
import VueNativeSock from 'vue-native-websocket'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0,
    socket: {
      isConnected: false,
      message: '',
      reconnectError: false,
    }
  },
  mutations: {
    SOCKET_ONOPEN (state, event)  {
      state.socket.isConnected = true
    },
    SOCKET_ONCLOSE (state, event)  {
      state.socket.isConnected = false
    },
    SOCKET_ONERROR (state, event)  {
      console.error(state, event)
    },
    // default handler called for all methods
    SOCKET_ONMESSAGE (state, message)  {
      state.message = message
    },
    // mutations for reconnect methods
    [WebSocket.WS_RECONNECT](state, count) {
      console.info(state, count)
    },
    [WebSocket.WS_RECONNECT_ERROR](state) {
      state.socket.reconnectError = true;
    },
    increment (state) {
      state.count++
    }
  }
})

Vue.use(VueNativeSock, 'ws://localhost:3000/', { store: store, format: 'json' })

const App = {
  name: 'app',
  template: '<div id="app" style="text-align: center"><h1>{{ this.$store.state.count }}</h1><p @click="$store.commit(\'increment\')">Increase</p></div>'
}

new Vue({
  el: '#app',
  render: h => h(App),
  store
})

[Joshfindit]

Simplest example I can think of: Keep a single variable in sync by receiving from the server

After that: Two-way sync of 1 variable from a single client to the server and back

Then after that: Keep two clients in sync with updating the value from one of them

[jrpruitt]

In the main.js file: Vue.use(VueNativeSock, 'ws://localhost:3000', { store: store, format: 'json' }) store.$socket = Vue.prototype.$socket

In the store.js file: mutations: { sendToServer(state, message) { this.$socket.send(message); }, } You can optionally use this.$socket.sendObj(object).

From any component: this.$store.commit('sendToServer', 'Hello Server');

[rianorie]

@jrpruitt Yes, that much I figured. But when I read the documentation that comes with this I got the very distinct idea that the premise is that it automatically does a push when a mutation happens. Same applies to actions that are called.

Given that the above doesn't seem the case I did come up with a way to do just that:

new Vue({
  el: '#app',
  render: h => h(App),
  store,
  mounted () {
    this.$store.subscribe(function (mutation) {
    // Do something... see console.log(mutation);
      this.$socket.sendObj(mutation);
  })
        this.$store.subscribeAction(function (action) {
    // Do something... see console.log(action);
      this.$socket.sendObj(action);
  })
  }
})

[sureshvv]

I am not using a store/Vuex.

Can you give me an example of sending data from my component?

this.$socket.send()

says this.$socket is undefined. I have already connected from a different component. Why is this not being seen?

I connect only at the time of login.

[ClausBendig]

I am not using a store/Vuex.

Can you give me an example of sending data from my component?

this.$socket.send()

says this.$socket is undefined. I have already connected from a different component. Why is this not being seen?

I connect only at the time of login.

I have the same issue, is vuex necessary?

[ClausBendig]

I am not using a store/Vuex. Can you give me an example of sending data from my component?

this.$socket.send()

says this.$socket is undefined. I have already connected from a different component. Why is this not being seen? I connect only at the time of login.

I have the same issue, is vuex necessary?

Vue.use(VueNativeSock.default, ...) instead of Vue.use(VueNativeSock, ...) solved the issue.

[sureshvv]

That did not work for me at all. I get

Uncaught TypeError: Cannot read property 'install' of undefined

[ClausBendig]

That did not work for me at all. I get

Uncaught TypeError: Cannot read property 'install' of undefined

Hmm, I'm using Vue and VueNativeSock in my Webbrowser, not with nodejs and there it works. What is the output of this.$socket and VueNativeSock in the console?

[sureshvv]

I abandoned this & am using ReconnectingWebsocket & am much happier.

[wyattbenno777]

Same issue as above Vue.use(VueNativeSock.default, ...) this shows an error

Uncaught TypeError: Cannot read property 'install' of undefined

[rizwanzaheer]

Same issue as above Vue.use(VueNativeSock.default, ...) this shows an error

Uncaught TypeError: Cannot read property 'install' of undefined

[richmason]

I got it to work using:

import Vue from 'vue'
...
Vue.prototype.$socket.send();

In my component (*.vue file)

[henrytom1703]

Hi guys. I have an issue when call sendObj in mounted func Vue warn]: Error in created hook: "InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable"

 mounted() {
      this.$socket.sendObj({
      method: "ping_server",
      params: 100,
      id: 0
    });
  }

Thanks

[Tpircsnart]

could offer very-basic example like send and receive message to 'echo.websocket.org' ?

[SelfhostedPro]

It would also be a good idea to show how to include it in just a component (I just need websockets for 2 pages on my site but all the examples I've seen show importing it in the main JS (different websockets to connect to on each as well)).