<p align="center"> <a href=""><img src="" alt="AdonisJs WebSocket"></a> </p>

Downloads in past


1.0.27 years ago7 years agoMinified + gzip package size for adonis-websocket-client in KB


AdonisJs WebSocket

Version Build Status Coverage Status Downloads License

Gitter Trello Support AdonisJs

<img src="" />

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

Table of Contents


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.


npm i --save adonis-websocket-client


You can grab the script file from

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 ='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 () {

Listening for events

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

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.