Emoji / Emotions icons integration in CHAT

Wednesday, 5 July 2017

emoji/emotions icons integration in existing chat

Hello Users,
Here, I will give an example to integrate the emoji/emotions icons in your Chat . Its done for node based chat, but still you can use for Ajax based chat.
Its quite simple, you just need to replace the emotions code to images.
For Example
:) - Happy
:( - Sad

Whenever new message appear, then you need to replace the smiley code to images OR previous message need to replace the smiley code to corresponding image.

Follow the Below Simple steps to Integrate in CHAT.

Step1: Download imoji icons from following links:
https://drive.google.com/open?id=0BxKVas2R9pKlYmo2eHEtbjMtRk0

place all image in \public\images\emoticons

Setup the static images path in express JS project.

    var express = require('express');
    var app = express();
    var http = require('http').Server(app);

    //set the public path
    app.use(express.static('public'));

In Client side, display the empotions
JavaScript functions to convert the code to smiles


    function replaceTextwithAllowedEmojis(text){        
            var returnText = text;
            //Emotions
            var emoticonCodes = [':)',':(',';)',':P',':D',':|',':O',':?','8)','8o','B)',':-)',':-(',':-*','O:-D','&gt;:-D',':o)',':idea:',':important:',':help:',':error:',':warning:',':favorite:'];
            
            //Emoji iconds
            var emoticonFiles = ['smile.png','sad.png','wink.png','razz.png','grin.png','plain.png','surprise.png','confused.png','glasses.png','eek.png','cool.png','smile-big.png','crying.png','kiss.png','angel.png','devilish.png','monkey.png','idea.png','important.png','help.png','error.png','warning.png','favorite.png'];

            var emojiHtmlStrPrefix = '<img class="emoticon" src="/images/emoticons/&#39;;
            var emojiHtmlStrPostfix = &#39;" />';
            
           
            for(var i=0; i<emoticoncodes .length="" emoticoncodes="" i="" if="" returntext.indexof=""> -1)){
                    // replace text with its icon file
                    var imgHtmlStr =  emojiHtmlStrPrefix+emoticonFiles[i]+emojiHtmlStrPostfix;
                    returnText = returnText.replace(emoticonCodes[i],imgHtmlStr);
                }
            }
            return returnText;
    }
</emoticoncodes>

Display the above functions.


            socket.on('chat_message', function(dataObj) {                
                $('#messages').append($('
[li]').html(replaceTextwithAllowedEmojis(dataObj.text)));
            });

Wednesday, 5 July 2017

Emoji / Emotions icons integration in CHAT

Follow the Below Simple steps to Integrate in CHAT.

Best Related Posts are Following: