vue-talk

You should use vue-talk with socketio-chat

Installation

$ npm install vue-talk --save

Setup

Include vue-talk in your project and register the plugin.

var Vue = require('vue');
var VueTalk = require('vue-talk');
Vue.use(VueTalk);

Styles

Add the css located in src/css/chat.css in your project.

Usage

Add the component where you want to display the chat.

<vue-talk room-name="room-test"></vue-talk>

Starts the the chat using the following code

/* ... */
    mounted:function(){
        var socket = io.connect();
        var user = {
            id:1,
            name:'Valter Lorran',
            img:'profile.jpg'
        };
        var configs = {
            title: 'Chat Title',
            inputPlaceholder: 'Type a message...',
            endPointFetchUsers: 'http://mysite.com/getusers'
        };
        Vue.VueTalk.startChat('room-test', socket, user, configs);
    }
/* ... */

Template

Default template:

<div class="wb-chat" v-bind:id="'chat-room-' + roomName">
    <div class="wb-chat-header">
        {{configs.title}} <button class="wb-chat-button" v-on:click="tabUsers = true">{{configs.button_text}}</button>
    </div>
    <div class="wb-chat-messages wb-chat-scroll-controller" v-on:scroll="onScroll">
        <div v-for="(message, $index) in messages">
            <div class="wb-chat-user" v-if="(typeof messages[$index - 1] != 'undefined' && messages[$index - 1].user_id != message.user_id) || typeof messages[$index - 1] == 'undefined'">
                <img v-bind:src="VTUsers[message.user_id] ? VTUsers[message.user_id].img : ''" />
                <div>{{VTUsers[message.user_id] ? VTUsers[message.user_id].name : ''}}</div>
            </div>
            <div class="wb-chat-m">{{message.message}}</div>
        </div>
    </div>
    <div class="wb-chat-input">
        <textarea v-bind:placeholder="configs.inputPlaceholder" v-model="message" v-on:keyup.enter="sendMessage"></textarea>
    </div>

    <transition name="wb-chat-tab-users">
        <div class="wb-chat-users" v-if="tabUsers">
            <div class="wb-chat-header">
                {{configs.users_tab_text}} <button class="wb-chat-button" v-on:click="tabUsers = false">{{configs.button_chat}}</button>
            </div>
            <div class="wb-chat-messages">
                <div v-for="user in VTUsers">
                    <div class="wb-chat-user">
                        <img v-bind:src="user.img" />
                        <div>{{user.name}}</div>
                        <span v-bind:class="{online:user.online}">&#9679</span>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</div>

Custom Template

You can pass in the config the new texts for:

| Name | Description | | --- | --- | | title | Chat title | | button_text | Text for the button to show the users | | users_tab_text | Title in users tab | | button_chat | Text in the button to show the chat | | inputPlaceholder | Placeholder to use in the chat |

You can edit it as you like, but you should use the following objects and events:

| Name | Description | | --- | --- | | configs.title | Chat title | | configs.button_text | Text for the button to show the users | | configs.users_tab_text | Title in users tab | | configs.button_chat | Text in the button to show the chat | | configs.inputPlaceholder | Placeholder to use in the chat | | message | Model that holds the message that the user is typing | | messages | Array of messages stored in the component | | VTUsers | Object that contains all the users and its data(id, img, name) | | sendMessage | Function that tries to send a message using the message model |

End-Point Fetch Users

You need to tell which url the plugin should fetch users data. This is important beacause sometimes the users may not be connected and we need fetch the data of these users.

Request Driver By default, is used Vue.http to request the url:

Vue.http.get

If you want use another driver to request the url you can set in a new function in the config variable:

var configs = {
    /* ... */
    driverFetchUsers: function(ids, driverFetchUsersSuccess){
        $.get('http://mysite.com/getusers?ids='+encodeURIComponent(ids))
            .success(driverFetchUsersSuccess);
    }
    /* ... */
};

Notice: if you change the request driver you'll probably need to to change the Request Response Driver(see next). The default driver expects a response simlar to:

var response = {
    /* ... */
    data:[ /* users array */ ]
}
driverFetchUsersSuccess(response);

Notice: the success driverFetchUsersSuccess must be called and receive an array of users object.

Success Callback Driver You can set your own success function to set the user in the component. The function must return a array of users.

var configs = {
    /* ... */
    driverFetchUsersSuccess: function(response){
        return response.users;
    }
    /* ... */
};

Setting URL Using the config parameter you just need to tell the full path to the end-point.

var configs = {
    /* ... */
    endPointFetchUsers: 'http://mysite.com/getusers'
    /* ... */
};

This end point will receive an array of ids(example in php):

//http://mysite.com/getusers?ids=[1,2,3,4]
$ids = $_GET['ids'];
//selects the user in the database for example and returns
$users = $mysql->select('id, name, img')->from('users')->where('id in ('.join($ids,',').')');
return $users;

The expected response is something like:

[
 {
    "id":1,
    "name":"Valter Lorran",
    "img":"profile.jpg"
 },
 {
    "id":2,
    "name":"Vera Silviane",
    "img":"profile.jpg"
 },
 /* ... */
]

Events received from socket.io

| Event | Description | | --- | --- | | userDisconnect | This event is fired when an user in the room lose your connection or disconnects | | userJoinedRoom | This event is fired when an user joins the room | | userSentMessage | This event is fired when an user sends a message | | userStartedTyping | This event is fired when an user starts typing | | userStoppedTyping | This event is fired when an user stops typing | | disconnect | This event is fired when the current user is disconnected | | connect | This event is fired when the current user is connected |

Event that the current user fires to socket.io

| Event | Description | | --- | --- | | sendMessage | The current user fire this event when press enter in the textarea. | | startTyping | The current user fire this event when he presses any key in the textarea. | | stopTyping | The current user fire this event when 15 seconds passes after he last press any key in the textarea. | | register | The current user fire this when the component is started to register the current user in the room |

Event Personalization

You may change the name of some events to better fit your purpose. Using the config variable:

var config = {
    /* ... */
    events_names:{
        sendMessage:'sendMessage',
        startTyping:'startTyping',
        stopTyping:'stopTyping',
        userDisconnect:'userDisconnect',
        userJoinedRoom:'userJoinedRoom',
        userSentMessage:'userSentMessage',
        userStartedTyping:'userStartedTyping',
        userStoppedTyping:'userStoppedTyping',
        disconnect:'disconnect',
        connect:'connect',
        register:'register'
    }
}