Building a simple chatbot application using Angular, Express, Node & Socket.io
Chatbot is an application used to conduct online conversation via text or text-to-speech. The application that we are going to make is purely JavaScript based. So we’ll use a JavaScript library called Socket.io running in both the client-side and server-side both emitting and catching events. Besides that, we’ll use the Express.js, AngularJS &Node.js.
When I say ‘from scratch’, I just mean I’m not using any additional libraries or APIs. This is more an exercise in JS fundamentals than any kind of artificial intelligence or machine learning.
Let’s begin building our application. The client-side of the project contains a simple HTML page to get input messages from user(though I’ll post the link to the whole project at the end of the article) as our main aim is to integrate socket with the server-side and see how the data is actually transferred. Let’s first begin with the server-side.
Server-side:
We’ll use Express.js framework for handling server-side rendering and logic. Socket.io and express are the dependencies of our Node.js server-side.
package.json:
index.js file is the entry point of our program. In the index.js file, we’ll set up a socket.io instance with the HTTP server.
index.js:
Now create a data.ts file contains some simple arrays of arrays that include possible triggers (user text) and responses (bot text).
data.js:
Now for the fun stuff! Create a socket.js file, That contains emit & catch socket.io events based on the events emitted and caught by and from the client-side. Also contain the function that actually works as a bot (Robot) for processing user input. In this function, Whatever user input is coming, the RegExp action converts that into a simple standard format. These methods make everything in the input lowercase, remove any rogue characters that would make matches difficult, and replace certain things like whats up to what is up. If the user input what is going on, whats going on, or what's going on, they will all lead to the same valid bot response, instead of having to account for these differences separately somehow.
socket.js:
The functioning of the socket.io is such that the emitting and the receiving of the events by the client and the server is in real-time.
Client-side:
At the client-side, we’ll use MVC pattern-based framework AngularJS. We’ll have only a single page for getting input from the user, For that we only create one service file for emitting and catching socket.io events.
The project has only one component that is app as we don’t add a login/Signup system because our main aim to integrate socket with the server-side so that the bot is answering in real-time.
app.component.html:
And similarly simple app.component.css file:
app.component.css:
I will keep the HTML page simple & easy to understand but you can free to customize to make this page more interactive. The typescript logic is as follows:
app.component.ts:
For any component, the ngOnInit() method is called whenever the component is rendered. So when the component is rendered, we are subscribed to the receivedReply() method. So whenever a user sends a message from the input field, the subscription to the former method by the bot would append the message to the messageArray.
As mentioned earlier, socket.io is required on both the client-side and server-side. At the client-side, we use a module called socket.io-client for communication on WebSockets protocol. All the socket logic is written in our socket.service.ts file.
socket.service.ts:
After doing all the above steps, our chatbot application working fine.
Project code link:
The instructions to run the client-side and server-side code is written in the README.md file.