adonis-websocket-client

<img src="https://saucelabs.com/browser-matrix/amanvirk.svg" />

This repo contains the code for websocket client to be used on frontend for communicating with AdonisJs websocket server. :rocket:

---

Table of Contents

• Setup
• Getting Started
• Contribution Guidelines

Setup

Feel free to use the module with Webpack, Browserify for similar build tools that supports CommonJs module loading, or you can also drop the script file right from the CDN.

CommonJs

npm i --save adonis-websocket-client

CDN

You can grab the script file from unpkg.com.

Getting Started

Getting started is simple.

const ws = require('adonis-websocket-client')
// or available as global when using the script file from CDN
const io = ws('http://localhost:3333')

Connecting to a channel

AdonisJs comes with inbuilt support for channels and rooms. In order to communicate with the websocket server, you are required for connect to a channel first.

const chat = io.channel('chat').connect()
chat.on('message', function (message) {
  // do something with the message
})

Emitting Messages

chat.emit('message', 'Some message from client')

Join A Room

const data = {}
chat.joinRoom('watercooler', data, function (error, joined) {
  // acknowledgement that you have joined the channel
})

Leave A Room

const data = {}
chat.leaveRoom('watercooler', data, function (error, joined) {
  // acknowledgement that you have left the channel
})

Using With Vuejs

I love Vuejs to be core and here's how you are going to use it with Vuejs.

const ws = require('adonis-websocket-client')
const wsVuePlugin = function (Vue, url, options) {
  Vue.prototype.$io = ws(url, options)
}
Vue.use(wsVuePlugin, 'http://localhost:3333', {})

Now you make use of the $io on all of your components.

Connect To A Channel

new Vue({
  el: '#app',
  created: function () {
    this.$io.channel('chat').connect()
  }
})

Listening for events

<script>
  export default {
    data: function () {
      return {
        messages: []
      }
    },
    created: function () {
      this.$io.on('message', (message) => {
        this.messages.push(message)
      })
    }
  }
</script>

Contribution Guidelines

In favor of active development we accept contributions from everyone. You can contribute by submitting a bug, creating pull requests or even improving documentation.
You can find a complete guide to be followed strictly before submitting your pull requests in the Official Documentation.