├── README.md ├── chat.html ├── chat.js └── styles.css /README.md: -------------------------------------------------------------------------------- 1 | # A Real Time Chat Built on Node-js and Socket.io 2 | 3 | ------------------------------------------------------------------ 4 | 5 | ## Setup your Chat Room 6 | 7 | ------------------------------------------------------------------ 8 | 9 | To Install node-js just follow this guide https://github.com/joyent/node/wiki/Installation. 10 | 11 | Then you need to Install the Node Pacakge Manager (NPM). Read this guide https://github.com/isaacs/npm. 12 | 13 | ------------------------------------------------------------------ 14 | 15 | Get socket.io via NPM by running: 16 | 17 | ```bash 18 | ~$ npm install socket.io 19 | ``` 20 | 21 | ------------------------------------------------------------------ 22 | 23 | Start the node-js server. Just type: 24 | 25 | ```bash 26 | ~$ node chat.js 27 | ``` 28 | 29 | ------------------------------------------------------------------ 30 | 31 | Open the chat.html file in your favourite browser and enjoy! 32 | -------------------------------------------------------------------------------- /chat.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 40 | 41 | 42 |
43 |

Real Time Chat

44 |
45 |
46 |
47 |
48 |
49 | 50 |
51 |
52 |
53 | 54 | 55 | -------------------------------------------------------------------------------- /chat.js: -------------------------------------------------------------------------------- 1 | var DEBUG = true 2 | var PORT = 3000 3 | var INIT_MESSAGES = 5 4 | 5 | var http = require('http') 6 | 7 | var server = http.createServer() 8 | server.listen(PORT) 9 | 10 | var io = require('socket.io').listen(server) 11 | io.set ('transports', ['xhr-polling', 'jsonp-polling']) 12 | 13 | var messages = new Array() 14 | 15 | Array.prototype.inject = function(element) { 16 | 17 | if (this.length >= INIT_MESSAGES) { 18 | this.shift() 19 | } 20 | this.push(element) 21 | } 22 | 23 | io.sockets.on('connection', function(client) { 24 | 25 | if (DEBUG) 26 | console.log("New Connection: ", client.id) 27 | 28 | client.emit("init", JSON.stringify(messages)) 29 | 30 | client.on('msg', function(msg) { 31 | 32 | if (DEBUG) 33 | console.log("Message: " + msg) 34 | 35 | var message = JSON.parse(msg) 36 | messages.inject(message) 37 | 38 | client.broadcast.emit('msg', msg) 39 | }) 40 | 41 | client.on('disconnect', function() { 42 | 43 | if (DEBUG) 44 | console.log("Disconnected: ", client.id) 45 | }) 46 | }) 47 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | #msgs { 2 | height: 300px; 3 | background: #f3f3ff; 4 | font-family: monospace, sans; 5 | overflow:auto; 6 | } 7 | 8 | .chat-title { 9 | color: white; 10 | background: #a2a2ee; 11 | font-weight: bold; 12 | font-size: 20px; 13 | height: 24px; 14 | padding: 2px; 15 | } 16 | --------------------------------------------------------------------------------