NodeJs – WebSocket projekt source code

Jeg lovede igår jeg ville lave en blog post med min NodeJs – WebSocket source code og hvordan man selv kunne teste den, det blev ikke igår men det bliver nu fordi jeg havde simpelthen for travlt igår.

 

Step by step

  1. Hav en linux computer, evt. Ubuntu det bruger jeg
  2. Hent og installer NodeJs
  3. Hent og installer evt. XAMMP som er en apache, mysql osv. til din server, den bruges til at du kan på andre computere besøge den hjemmeside du laver på din server
  4. På din XAMPP installation går du ind i mappen htdocs og laver en mappe der hedder test
  5. Hent Socket.IO-node – udpak mappen, lig mappen i din test mappe og kald denSocket.IO-node
  6. Hent Socket.IO – udpak mappen, lig mappen i din test mappe og kald den Socket.IO

Socket.IO og Socket.IO-node er to libraries der hjælper til at holde en direkte forbindelse imellem NodeJs og HTML5 Websockets.

 

Så skal der kodes!

Lav en fil i din test mappe der hedder server.js

Og i den fil skriver du

var sys = require("sys") , fs = require("fs") , path = require("path") , http = require("http");

var io = require('./Socket.IO-node');
var server = http.createServer(function (req, res) 
{ 
 //Server kode 
});

//Port folk skal connecte
//PORT HER skal udskiftes med den port du vil bruge, porten skal skrives som tal og uden " og ' bare som alm, tal.
server.listen(PORT HER);

//Hvilken server socket IO skal lytte til var io = io.listen(server);
//Init variabler 
var besked = ""; 
io.on('connection', function(client){ client.send(besked);

//Når der bliver modtaget en besked fra en client
client.on('message', function(message)
{
 //Logger chat beskeden 
 sys.log(message);
 //Putter beskeden bag på hele chatten besked
 message += message+"";

 //Skriver beskeden til clienten selv
 client.send(besked);

 //Skriver beskeden til alle andre
 client.broadcast(besked); 
});

Nu laver du en ny fil der hedder index.php i din test mappe og i den skriver du

io.setPath('./Socket.IO/');

//Forbind med nodeJs - SocketIO server
var socket = new io.Socket(null, {port: SAMME_PORT_SOM_FØR, rememberTransport: false}); socket.connect();

//On connect
socket.on('connect', function () { });

//On message
socket.on('message', function(besked) { document.getElementById('beskedArea').innerHTML = besked; });

//On close
socket.on('close', function () { });

//On diconnect
socket.on('disconnect', function () { }); function send() {
var val = document.getElementById('text').value;
socket.send(val); }

I din test mappe skulle du gerne have:

Socket.IO

Socket.IO-node

server.js

index.php

Nu åbner du for terminalen fordi nu skal XAMPP startes og det gøres sådan her.

sudo /sti/til/lampp/lampp start

Husk og skriv den rigtige sti 😉

Når terminalen fortæller dig at lampp er startet så navigere du nu til htdocs og test mappen som gøres sådan her:

cd /sti/til/lampp/htdocs/test/

Igen husk at udskift stien til den rigtige sti.

Og nu skriver du bare node server.js

Så skulle den meget gerne fortælle den er klar til sockets og modtage information, så fyre du op for Chrome browseren og skriver serverens lokale ip/test i browseren og så skulle du gerne se en tekst boks.

Nu skulle du gerne kunne skrive i tekst boksen, når du skriver i den vil teksten blive vist i browseren på alle de brugere som er connected og teksten skulle også gerne blive vist i terminalen på serveren.

Husk at bruge Chrome browser fordi den er mest opdateret ang. websockets.

Nu vil jeg tilbage og udvikle min nodeJs chat 🙂