How do you create a simple chat application?
In this tutorial, I’m going to help you create your own chat application. You can integrate into any project! This tutorial help to the complete development of a chat application.
We’re going to be creating a Node.js app, Please make sure you have it installed.
Let’s start :
- create a folder
- cd into that directory in your terminal (command line)
- run
npm init
. This will create a newpackage.json
file. (it will ask you name/version, etc.)
Node.js as a Web Server
The HTTP module can create an HTTP server that listens to server ports and gives a response back to the client.
Use the createServer()
method to create an HTTP server:
var http = require('http');
//create a server object:
http.createServer(function (req, res) {
res.write('Hello World!'); //write a response to the client
res.end(); //end the response
}).listen(8080); //the server object listens on port 8080
Getting started with rs-chat plugin
You can install it through npm.
npm install rs-chat
Setup for nodejs
Open index.js or server.js or main.js file and put the below code and start nodejs server
var app = require('http')
var chat = require('chat')
chat.init({
host : 'localhost', // DB host
user : 'user', // DB User
password : 'password', // DB Password
database : 'database' // DB Name
});
Create table
CREATE TABLE `messages` (
`id` int(11) NOT NULL,
`userId` int(11) NOT NULL,
`toId` int(11) NOT NULL,
`msg` text NOT NULL,
`created_at` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
`read_at` datetime DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Load the required files
Download js and css from https://www.tutsmake.com
Inside the page’s head tag include the CSS file.
<link rel="stylesheet" type="text/css" href="https://unpkg.com/rs-chat@1.0.7/dist/rs-chat.min.css">
In the page’s footer, just before </body>, include the required JavaScript files.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
<script type="text/javascript" href="https://unpkg.com/rs-chat@1.0.7/dist/rs-chat.min.js"></script>
Instantiate the chat plugin
<script type="text/javascript">
RSChat.init({
socketUrl: 'http://localhost:8080/' // server url,
userId: '1', // logged in user id
name: 'ravi shukla', // logged in user name
});
</script>
Call the below function to open chat box
RSChat.start('user_id', 'username')
If you face any error installing nodejs chat plugin . Please go to git hub link and download.
Npm Package : https://www.npmjs.com/package/rs-chat
github : https://github.com/ravishukla007/chat
Youtube : https://www.youtube.com/watch?v=TGWlZkFIuV8
Website : https://www.tutsmake.com
Your are also welcome to post comments and share your issues and experience here!