Well, in this tutorial i will guide you to build simpliest chat application use Socket.io. This tutorial no basic prior knowledge of Node.JS or socket.io. So, everyone can try this tutorial.
create index.js
Or you can download this on github
The first goal is setup simple HTML webpage that serves out a form and a list of messages. We're use Node.JS web framework express to this end. Make sure you have installed Node.JS.
First, we create package.json manifest file describe your project. We create in empty directory. In mya example i name folder with Chat.
{
"name": "socket-chat-example",
"version": "0.0.1",
"description": "my first socket.io app",
"dependencies": {
"express": "^4.10.2",
"socket.io": "^1.4.5"
}
}
Now, in order to easily populate the dependencies with the things we need, we’ll use npm install --save:
npm install --save express@4.10.2.
create index.js
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
io.on('connection', function(socket){
socket.on('chat message', function(msg){
io.emit('chat message', msg);
});
});
http.listen(3000, function(){
console.log('listening on *:3000');
});
create index.html
<!doctype html>Here the result :
<html>
<head>
<title>Socket.IO chat</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
});
</script>
</body>
</html>
Or you can download this on github
No comments:
Post a Comment