Wednesday, 5 July 2017

Emoji / Emotions icons integration in CHAT

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.


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

    place all image in \public\images\emoticons
  2. 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'));
        
  3. 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','>:-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)));
                });
            </li>
    



  • No comments :

    Post a Comment