Monitor Real-time Consolelogs from action on HTML page using Socket.io
Tags: node, typescript, javascript, html
Published: 2020-04-24 08:59:49

<!-- wp:paragraph -->
<p>When we need to get a real-time response in our IOS APP, we often use <a href="https://nodejs.org/en/" target="_blank" rel="noreferrer noopener" aria-label="Node.js (opens in a new tab)">Node.js</a> to resolve this problem. and generally, we are using a console log to debug or check the output at the backend. <span style="text-decoration: underline;">But these things are only can be helpful when we run a project at the localhost</span>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"backgroundColor":"very-light-gray"} -->
<p class="has-background has-very-light-gray-background-color">Now, what if we need to check logs or error after uploading at the server. We get logs from servers and check logs one by one to sort out. But this solution takes a huge amount of time.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Is there any way to short it out in less amount of time? </strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>YES, you are at the right place, In this blog, we will see how can we print or display console log real-time in HTML page so we can see logs easily. <strong>Here is</strong></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><strong>Step-by-step solution </strong>Print / Display Console Log real-time in HTML page</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3>Step 1: Create New Project and Declare or assign basic or important variables</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Firstly we need to create a sample node.js project and then we need to create some sample functions to print of debug logs in the typescript page. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Here we are using Index.ts . And for output or display logs we are going to use Index.HTML. So let’s start the project.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":6630,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://www.samarpaninfotech.com/wp-content/uploads/2020/04/new-project-creation-index.ts_.png" alt="New Nodejs Project creation using index.ts" class="wp-image-6630"/><figcaption>New Nodejs Project creation</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>So as per snippet, first we need to declare or assign basic or important variables for a project, and now we are rapidly moving on logic for display real-time logs,</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Step 2: Logic for (display) Logs in Index.ts</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":6631,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://www.samarpaninfotech.com/wp-content/uploads/2020/04/Logic-for-display-Logs-in-Index.ts_.png" alt="Logic for display Logs in Index.ts" class="wp-image-6631"/><figcaption>Logic for display Logs in Index.ts</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>As per code snippet, we need to create a new function and then it will call every time when console.log is executed and it will pass the message as a data parameter.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>It will call <strong>eventEmitter</strong> which will be call logging function and which will pass as log message to HTML page so quickly we now we look at HTML page for better explanations.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Step 3: Display logic in HTML page</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":6633,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://www.samarpaninfotech.com/wp-content/uploads/2020/04/Display-logic-in-HTML-page.png" alt="Display logic in HTML page" class="wp-image-6633"/><figcaption>Display logic in HTML page</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>So as per the above snippet; listener method "<strong>log_messege</strong>" getting called from index.ts page every time when ‘logging’ function called. It will pass data as msg parameter and it will append in HTML element as text format. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Next, we move on to example for better explanations.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Step 4: Create Sample project and create functions</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>For example, we are going to create functions in the typescript page and put logs inside in the function. so check out next snippet,</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":6636,"align":"center","width":428,"height":147} -->
<div class="wp-block-image"><figure class="aligncenter is-resized"><img src="https://www.samarpaninfotech.com/wp-content/uploads/2020/04/Create-Sample-project-and-functions-in-typescript-page.png" alt="Create Sample project and  functions in typescript page" class="wp-image-6636" width="428" height="147"/><figcaption>Create Sample project and  functions in typescript page</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Whenever connection established then "<strong>connection</strong>" will be called and a log will be executed and it will print. After that, we create new function&nbsp;<strong>FirstFunction</strong>&nbsp;and whenever it calls it will execute console.log,&nbsp;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now, we are going to create more functions so we can be more clear about this functionality so please check out next snippet,</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>Step 5: Create sample functions in HTML page and design button to create event</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>As per function ‘FirstFunction ’ function,  ‘SecondFunction’ and ‘ThirdFunction’ will work same but log message is different.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now we quickly move on HTML page to use these functions,</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":6640,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://www.samarpaninfotech.com/wp-content/uploads/2020/04/create-sample-functions-in-HTML-page.png" alt="create sample functions in HTML page" class="wp-image-6640"/><figcaption>create sample functions in HTML page</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>We create a function in the HTML page for a call. These listener methods in HTML page and gave name ‘First’, ’Second’, ’Third’.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now, we will design HTML element button to execute this function's runtime,</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":6641,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://www.samarpaninfotech.com/wp-content/uploads/2020/04/design-button-to-create-event.png" alt="design button to create event" class="wp-image-6641"/><figcaption>design button to create event</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>You can see we also design "<strong>ul</strong>" in this page also, So using this "ul" we will print logs on the screen. And we call functions <strong>onClick</strong> event of the button, we will watch <strong>log_message</strong> method again so we can be more clear as we do it in&nbsp;<strong>Step 3.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":6642,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://www.samarpaninfotech.com/wp-content/uploads/2020/04/Display-logic-in-HTML-page-1.png" alt="Display logic in List View on HTML page" class="wp-image-6642"/><figcaption>Display logic in List View on HTML page</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Now, log message will append as list in the screen so we can see logs; all logs one by one. Next, we are going to run a project and let see this method is working or not.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>Step 6: Execute project and check output</h4>
<!-- /wp:heading -->

<!-- wp:image {"id":6643,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://www.samarpaninfotech.com/wp-content/uploads/2020/04/execute-project-and-check-first-output-1024x109.png" alt="execute project and check first output" class="wp-image-6643"/><figcaption>execute project and check first output</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>We can see there is some text on a screen. That is a log message which we put in the "<strong>Connection</strong>" method and we also discussed that it will execute when connection established so following is the output of this.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":6644,"align":"center","width":394,"height":254} -->
<div class="wp-block-image"><figure class="aligncenter is-resized"><img src="https://www.samarpaninfotech.com/wp-content/uploads/2020/04/execute-project-and-check-first-function-output.png" alt="execute project and check first function output" class="wp-image-6644" width="394" height="254"/><figcaption>execute project and check first function output</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Now, we are going to call first function and let see log is print real time in screen or not.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":6645,"align":"center","width":448,"height":283} -->
<div class="wp-block-image"><figure class="aligncenter is-resized"><img src="https://www.samarpaninfotech.com/wp-content/uploads/2020/04/check-first-function-output-printed-on-HTML-Page.png" alt="calling first function to check output printed on HTML Page" class="wp-image-6645" width="448" height="283"/><figcaption>calling first function to check output printed on HTML Page</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>At last, we can see log message successfully print on screen real time for first method. Following, we click on second or third function and let see its work fine or not.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":6646} -->
<figure class="wp-block-image"><img src="https://www.samarpaninfotech.com/wp-content/uploads/2020/04/check-final-project-all-function-print-console-logs-output-1024x153.png" alt="check final project all function print console logs output" class="wp-image-6646"/><figcaption>check final project all function print console logs output</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>From the above screenshot, we can see it is working fine and we are getting logs real-time on a screen for all methods. Hope you can understand functionality properly.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><em>Thank You. That’s it for now. Stay Connected for more tutorials, until than Happy Coding…</em></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"backgroundColor":"very-light-gray"} -->
<p class="has-background has-very-light-gray-background-color"><em>We're always happy to assist you to turn your business development ideas into beautiful reality</em>; you can <a href="https://www.samarpaninfotech.com/hire-nodejs-developers/" target="_blank" rel="noreferrer noopener" aria-label="hire our node.js developers (opens in a new tab)">hire our node.js developers</a> for further assistance with easy hiring model.</p>
<!-- /wp:paragraph -->