Integrating WordPress Chatroom using nodejs and socket.io -part 2

In Integrating WordPress Chatroom using Nodejs and socket.io -part 1, we created chat-room where multiple users can talk to each other.Now in this part, we are going to integrate chatroom into WordPress.

 Download

 Demo

To integrate chatroom into WordPress, we will use only client-side code i.e. HTML, CSS and Javascript.I am using twentysixteenWordPress theme. Now open twentysixteen theme folder which is located at, wp-contents/themes/.

Below you see the folder structure of twentysixteen theme. Now create a new javascript file in the js folder of

Now create a new javascript file in the js folder of twentysixteen theme named as chat-js.js as shown below.Now copy the code of previously created chat-js file and paste it into a new chat-js.js file.

In the below Image you can see the Red Pin icon, which indicates that we are going to edit those red pin marked files. Let’s start one by one,

1. Function.php

Open function.php and Find function twentysixteen_scripts() in function.php, when you find that function add the following line to that function.

//importing chat-js.js file by usin gwp_enqueue_script function 
wp_enqueue_script( 'chat-js', get_template_directory_uri() . '/js/chat-js.js', array( 'jquery' ), '20150330', true );

//creating php array 
$data = array("id"=>get_current_user_id());

// Passing above array to chat-js file
wp_localize_script( "chat-js", "blog", $data );

Here, am using two functions

1. wp_enqueue_script :used to import script in wordpress.
2. wp_localize_script :used to pass parameter to javascript file from php.

Here am passing $data an array from PHP to chat-js file and in chat-js.js file am going to access that array as blogjavascript object.

Now open the chat-js.js file, In First part we were providing static user id from a chat-js.js file, Now replace that number by blog.id.

Final chat-js.js code shown below.

chat-js.js:

( function( $ ) {
    var socket = io();
    var uid=1;
socket.emit('validate',uid);

$('.msg_box').keypress(function(event){

if ( event.which == 13 ) {        
        data={
        id:uid,
        msg:$("#msg_box").val()
        };
        socket.emit('send msg',data);
            $("#msg_box").val('');
        }
    });

socket.on('user entrance',function(data){
if(uid!="0"){
$("#chatbox").append("<div class='col-xs-12'><h2><center>"+data.info+"</center></h2></div>");
console.log(data.message);
for(var i=0;i<data.message.length;i++){
if(data.message[i]['uid']==uid){
$("#chatbox").append("<li class='actual_msg' style='text-align:right;float:right'><section><strong style='margin-right: -15px;'>You:</strong><br>"+data.message[i].messages+"</section><span class='date'>"+data.message[i].time+"</span></li>"); 
}else{
$("#chatbox").append("<li class='actual_msg' style='text-align:left;float:left'><section><strong style='margin-left: -15px;'>"+data.message[i].name+": </strong><br>"+data.message[i].messages+"</section><span class='date'>"+data.message[i].time+"</span></li>"); 
}
}
$("#chatbox").animate({scrollTop: $("#chatbox").get(0).scrollHeight},900);
} 
}); 

socket.on('exit',function(data){
    if((data.message).trim()!="undefined"){
    $("#chatbox").append("<div class='col-xs-12'><h2><center>"+data.message+" is offline</center></h2></div>");
    }
});

socket.on('get msg',function(data){
//to scroll the div
$("#chatbox").animate({scrollTop: $("#chatbox").get(0).scrollHeight},900);
if(data.id==uid){
$("#chatbox").append("<li class='actual_msg' style='text-align:right;float:right'><section><strong style='margin-right: -15px;'>You:</strong><br>"+data.message+"</section><span class='date'>"+data.date+"</span></li>"); 
}else{
    $("#chatbox").append("<li class='actual_msg' style='text-align:left;float:left'><section><strong style='margin-left: -15px;'>"+data.user+": </strong><br>"+data.message+"</section><span class='date'>"+data.date+"</span></li>"); 
}
});

} )( jQuery );

2. Header.php file :

Open header.php file, add below line after,<?php wp_head(); ?>

<script src="http://localhost:81/socket.io/socket.io.js"></script>

Now save the header.php and close the file.

3. Index.php:

You can add chat room code anywhere in WordPress site.Copy the HTML code of previously created index.html and paste where ever you want.Here am adding this code in index.php file.as shown below,

Note: I have removed the rest of the code in index.php file.

<?php
/**
 * The main template file
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 *
 * @link http://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Sixteen
 * @since Twenty Sixteen 1.0
 */
get_header(); ?>

    <div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">

<div class="container" >
    <ul class="chatbox" id="chatbox">
      <?php 
          if(get_current_user_id()=="0"){
          echo "<h2><center>Login to join chat room</center></h2>";
          }
      ?>
    </ul>
    <br/>
    <div id="name-group" class="form-group">
        <textarea class="form-control msg_box" id="msg_box" placeholder="Type here and check the Title in Tab"></textarea>
    </div>
</div>

</main><!-- .site-main -->
</div><!-- .content-area -->

<?php get_sidebar(); ?>

4. style.css:

Now only remaining part is CSS, which we are going to add in style.css file. So open your style.css file and the copy below code and paste it into a style.css file.

.container{
    height: 100%;
    font-family: Montserrat, "Helvetica Neue", sans-serif;
  }
  .chatbox{
    width: 100%;
    height: 350px;
    overflow-y:scroll;
    background: rgba(146, 121, 110, 0.26);
    border-radius: 0px;
    border: solid 1px #BDBDBD;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    margin: 0px !important;
  }
  .chatbox li{
    clear: both;
    margin-bottom: 10px;
    text-decoration: none;
    list-style-type: none;
    margin: 20px 0px 0px 20px;
  }
  .actual_msg{
    float: left;
    display: inline-block;
    margin-right: 20px;
    padding: 25px 34px;
    min-width: 160px;
    min-height: 10px;
    max-width: 510px;
    border-radius: 5px;
    box-shadow: 0px 3px 3px rgba(172, 172, 172, 0.73);
    line-height: 1.4;
    word-wrap: break-word;
    color: #1A1A1A;
    background-color: rgba(0, 0, 0, 0.11);        
}
.date{
    font-size: 9px;
    float: left;
    margin-top: 10px;
}

Now open WordPress site in the browser and log in to WordPress and try to chat with other users If you can chat with other users than congratulations You have successfully integrated WordPress and chatroom using nodejs and socket.io.

If you have any queries or suggestions, please do let me know in the comment section below.