Monitor Real-time Consolelogs from action on HTML page using Socket.io

When we need to get a real-time response in our IOS APP, we often use Node.js to resolve this problem. and generally, we are using a console log to debug or check the output at the backend. But these things are only can be helpful when we run a project at the localhost.

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.

Is there any way to short it out in less amount of time?

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. Here is

Step-by-step solution Print / Display Console Log real-time in HTML page

Step 1: Create New Project and Declare or assign basic or important variables

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.

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.

New Nodejs Project creation

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,

Step 2: Logic for (display) Logs in Index.ts

Logic for display Logs in Index.ts

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.

It will call eventEmitter 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.

Step 3: Display logic in HTML page

Display logic in HTML page

So as per the above snippet; listener method "log_messege" 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.

Next, we move on to example for better explanations.

Step 4: Create Sample project and create functions

For example, we are going to create functions in the typescript page and put logs inside in the function. so check out next snippet,

Create Sample project and functions in typescript page

Whenever connection established then "connection" will be called and a log will be executed and it will print. After that, we create new function FirstFunction and whenever it calls it will execute console.log, 

Now, we are going to create more functions so we can be more clear about this functionality so please check out next snippet,

Step 5: Create sample functions in HTML page and design button to create event

As per function ‘FirstFunction ’ function, ‘SecondFunction’ and ‘ThirdFunction’ will work same but log message is different.

Now we quickly move on HTML page to use these functions,

create sample functions in HTML page

We create a function in the HTML page for a call. These listener methods in HTML page and gave name ‘First’, ’Second’, ’Third’.

Now, we will design HTML element button to execute this function's runtime,

design button to create event

You can see we also design "ul" in this page also, So using this "ul" we will print logs on the screen. And we call functions onClick event of the button, we will watch log_message method again so we can be more clear as we do it in Step 3.

Display logic in List View on HTML page

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.

Step 6: Execute project and check output

execute project and check first output

We can see there is some text on a screen. That is a log message which we put in the "Connection" method and we also discussed that it will execute when connection established so following is the output of this.

execute project and check first function output

Now, we are going to call first function and let see log is print real time in screen or not.

calling first function to check output printed on HTML Page

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.

check final project all function print console logs output

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.

Thank You. That’s it for now. Stay Connected for more tutorials, until than Happy Coding…

We're always happy to assist you to turn your business development ideas into beautiful reality; you can hire our node.js developers for further assistance with easy hiring model.

Comments

[Adnan Babakan (he/him)]

Hi
Thanks for your post it was awesome
Try to embed your codes instead of taking pictures so maybe some wants to copy it.

[Quan Vu]

The sirmilar solution use SocketIO, Socket Admin UI you can find at my sample project at: github.com/quan-vu/nodejs-examples. Give me a start if it useful for you :)

[Sandip Malaviya]

Thanks for positive feedback. I will make changes and embed code snippets.