Emoji / Emotions icons integration in 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>

4. Display the above functions.

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

Best Related Posts are Following:

1. Angularjs 2 Interview Questions and Answers.
2. React JS Interview Questions and Answers.
3. Bootstrap Datatable Example - Export into CSV.
4. How to get visitor location with JavaScript ?.
5. Bootstrap Interview Questions and Answers for 3 Month Experience.
6. Twitter Bootstrap Interview Questions and Answers.
7. How to detect and change Browser user agent?.
8. Overriding The Default Text Selection Color With CSS.
9. WebRTC Examples.
10. Dojo Interview Questions and Answers for Fresher.
11. EmberJS Interview Questions and Answers.
12. Basic Ember js Interview Questions and Answers.
13. Express Js Interview Questions and Answers.
14. Node Js Interview Questions and Answers for Experienced.
15. JQuery Interview Questions And Answers For Experienced.

Express Js routing example - GET/POST/PUT

Question: Give example of express JS working with Node?

var express = require('express');
var app = express();

var bodyParser = require('body-parser')
app.use(bodyParser.json());  
app.use(bodyParser.urlencoded({
    extended: true
}));

app.get('/', function(req, res){
  res.send('id: ' + req.query.id);  
});
app.listen(3000);

Question: What is use of body-parser?
It is middleware in nodeJS.
body-parser is used to parse incoming request bodies, available under the req.body property.



Example-1: URL / with Get Method.

app.get('/', function (req, res) {
  res.send('Hello, this is Home page.')
})

Example-2: URL /about with Get Method.

app.get('/about', function (req, res) {
  res.send('You have called /about with get method.')
})

Example-3. URL /senddata with POST Method.

app.post('/senddata', function (req, res) {
    //req.body have all the parameter
   console.log(req.body);
  res.send('Hello, Received post data request.')
})

Example-4: Routing with Regex 

app.get('/ab?cd', function (req, res) {
  res.send('ab?cd')
})

This route path will match acd, abcd.


Example-5: Routing with Regex

app.get('/ab+cd', function (req, res) {
  res.send('ab?cd')
})

This route path will match abcd, abbcd, abbbcd, and so on.



Example-6: Routing with dynamic parameter 

app.get('/users/:userId/books/:bookId', function (req, res) {
  console.log(req.params);
   res.send('Received the request for /users/10/book/12222');
});

Request URL: http://localhost:8080/users/10/books/12222


Example-7: Routing with dynamic parameter - Example 2

app.get('/messages/:from-:to', function (req, res) {
  console.log(req.params);
   res.send('Received the request for /messages/10-100');
});

Request URL: http://localhost:8080/messages/10-1000


Question: How to send request with all methods i.e GET/POST/PUT

app.all('/messages/list', function (req, res) {  
   res.send('Work for all type of request');
});

Best Related Posts are Following:

1. How to upload file/images using nodejs?.
2. Express JS - use res.sendFile - use EJS template - Set and Get Session data.
3. How to Create RESTful APIs in Node Js using Express JS and MongoDB.
4. How to use cookies with expressJS in node.js.
5. Express js Interview questions and answers.