Simple chat with VueJS & Rocket.Chat

• See live version.
• See sources

You can try the chat in this demo.

First, create an application vueJs with vue cli.

vue init webpack

Add rocket.chat.realtime.api.rxjs to javascript dependencies.

npm install --save rocket.chat.realtime.api.rxjs

src/App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
  export default {
    name: 'App'
  }
</script>

<style>
</style>

src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Chat from '@/components/Chat'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Chat',
      component: Chat
    }
  ]
})

src/api/index.js

import {RealTimeAPI} from 'rocket.chat.realtime.api.rxjs'

export default {
  connectToRocketChat(rocketChatRealTimeApiUrl) {
    return new RealTimeAPI (rocketChatRealTimeApiUrl)
  }
}

src/components/Chat.vue

<template>
  <div class="chat">
    <div>
      <p>Use Rocket.Chat REST API to get your userId and token</p>
      <div><pre><code>curl -X "POST" "https://chat.myserver.com/api/v1/login" \
-H "Content-Type: application/json; charset=utf-8" \
-d $'{
"username": "my_username",
"password": "my_password"
  }'</code></pre>
      </div>
    </div>
    <div>Rocket.Chat websocket URL : {{webSocketUrl}}
    </div>
    <div>UserId : <input type="text" v-model="userId" :disabled="loggedIn"/>
      Auth Token : <input type="text" v-model="authToken" :disabled="loggedIn"/>
      <button v-if="!loggedIn" v-on:click="login">Login</button>
    </div>
    <div>Room id (default sandbox) : <input type="text" v-model="roomId"/>
      <button v-if="!roomConnected" v-on:click="connectRoom">Subscribe to room</button>
    </div>
    <div>
      Send message : <input type="text" v-on:keyup.enter="sendMessage" v-model="newMessage"/>
      <button v-on:click="sendMessage">Send</button>
    </div>
    <div id="messages" style="max-height: 400px;overflow-y: scroll">
      <div class="message" v-for="(message,messageIndex) in messages" :key="messageIndex">
        <b v-if="formatMessage (message).formattedDate">
          {{formatMessage (message).formattedDate}}</b>
        <code>{{message}}</code>
      </div>
    </div>
  </div>
</template>

<script>
  import rcApi from '../api'

  let api = null
  export default {
    name: 'Chat',
    data() {
      return {
        webSocketUrl: 'wss://open.rocket.chat/websocket',
        connectedToApi: true,
        loggedIn: false,
        userId: '',
        authToken: '',
        roomName: 'sandbox',
        roomId: 'Drjw54ftqGa4antMW',
        roomConnected: false,
        newMessage: '',
        messages: [],
        errors: []
      }
    },
    mounted() {
      api = rcApi.connectToRocketChat (this.webSocketUrl)
      api.onError (error => this.errors.push (error))
      api.onCompletion (() => console.log ("finished"))
      api.onMessage (message => {
        this.messages.push (message)
      })
      api.connectToServer ()
        .subscribe (() => {
            api.keepAlive () // Ping Server
          },
          (error) => {
            this.errors.push (error)
          }
        )
    },
    methods: {
      login() {
        if (!this.loggedIn) {
          api.loginWithAuthToken (this.authToken)
            .subscribe (apiEvent => {
              if (apiEvent.msg === 'result') {
                // success
                this.messages.push (apiEvent.msg)
                this.loggedIn = true
              }
            }, (error) => {
              this.errors.push (error)
            })
        }
      },
      connectRoom() {
        if (!this.roomConnected) {
          api.sendMessage ({
            "msg": "sub",
            "id": '' + new Date ().getTime (),
            "name": "stream-room-messages",
            "params": [
              this.roomId,
              false
            ]
          })
        }
      },
      sendMessage() {
        api.sendMessage ({
          "msg": "method",
          "method": "sendMessage",
          "id": '' + new Date ().getTime (),
          "params": [
            {
              "_id": '' + new Date ().getTime (),
              "rid": this.roomId,
              "msg": this.newMessage
            }
          ]
        })
        this.newMessage = ''
      },
      formatMessage(message) {
        let result = {message}
        if (message.fields !== undefined &&
          message.fields.args !== undefined &&
          message.fields.args.length > 0 &&
          message.fields.args[0].ts !== undefined &&
          message.fields.args[0].ts.$date !== undefined
        ) {
          result.formattedDate = new Date (message.fields.args[0].ts.$date)
        }
        return result
      }
    }
  }
</script>

<style>
</style>