Simple chat with VueJS & Rocket.Chat

Chat in action Simple chat application with Rocket.Chat and VueJs.

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 : 
    </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">
          </b>
        <code></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>
Written on February 15, 2018
Licence Creative Commons
Ce(tte) œuvre est mise à disposition selon les termes de la Licence Creative Commons Attribution 4.0 International.