HTML5 : node.js and WebSocket - Part 2 socket.io and sayHello

Socket.io เป็น module ที่ช่วยในการทำ WebSocket ซึ่งเป็น tcp อ้างเชื่อมต่อจะต้องมี weburl และ port
ซึ่งใน module ก็มีทั้งฝั่ง client และ server

ส่วน server จะผูกกับ node.js ที่เราได้ตั้ง path ไว้เรียบร้อยแล้วใน part1 ซึ่งสามารถเรียกใช้ได้ทันที

ส่วน client เราต้องนำ javascript ไฟล์ที่อยู่ใน module ถ้าเครื่องผมจะอยู่ที่ E:\Program Files\nodejs\node_modules\npm\node_modules\socket.io\node_modules\socket.io-client\dist

ซึ่งมีอยู่ 2 ไฟล์ socket.io.js และ socket.io.min.js ซึ่งสามารถเลือกเอาไปใช้ได้ครับ .min แค่บีบอัดแล้วครับทำให้ไฟล์เล็กลง

ใน โฟลเดอร์ socket.io-client มีโฟลเดอร์ test ให้ด้วยนะครับเป็นตัวอย่างโค้ดให้เรานำเอาไปประยุกต์ต่อได้ครับ

เข้าเนื้อหาวันนี้กัน
- main entrance ของ client ครับ ใครติดต่อเข้ามาก็จะเข้ามาที่นี่ก่อนเลย ซึ่ง socket ที่ได้มาคือ clent socket ไว้สำหรับใช้ในการอ้างอิงเพื่อส่งข้อมูลกลับไปหา client ได้ครับ

socketio.listen(server).on('connection', function(socket){
   
}

ในการรับส่งข้อมูลเราจะใช้ผ่าน object ของ socket ครับ ซึ่งมี 2 method หลักๆ

- socket.on เป็น listener method สำหรับรอรับข้อมูลที่ส่งมาจาก client ซึ่งรับชื่อสำหรับการติดต่อ ตามตัวอย่างคือ sayHello และ ข้อมูลที่ได้รับมา

ตัวอย่าง
socket.on('sayHello', function (data) {
    console.log("sayHello = " + data);
    socket.emit("sayHello","Hello " + data); // send back to client
});

- socket.emit ใช้สำหรับส่งค่าไปยัง listener ที่เราสร้างไว้  ซึ่งใช้ทั้ง client และ server เหมือนกัน
ตัวอย่าง

socket.emit("sayHello","Piti"); // client ส่งค่า Piti ไปยัง on("sayHello") ที่ได้สร้างไว้

- socket.broadcast.emit ใช้ในการส่งหาทุก socket ยกเว้น socket ของคนส่งครับ ถ้าอยากส่งให้คนส่งด้วยก็ต้อง socket.emit ของตัวเองเพิ่มอีกหนึ่งอันครับ

--------------------------------------------------------------------------------------

มาภาคปฏิบัติครับ

//----------- Server Side ---------------//

// part2/server.js
var http = require('http');
var formidable = require("formidable");
var socketio = require('socket.io');
var server = http.createServer(function(req, res) {
        form = new formidable.IncomingForm();
        form.parse(req, function(e, fields, files){
                res.writeHead(200, [['Content-type','text/plain'],['Content-Length',0]]);
                res.write('');
                res.end();
                //Handle sending data back through the socket to the web client
                handleServerNotice(fields);
        });
}).listen(1333, function() {
        console.log('listening on 1333');
});


var sockets = new Array();

socketio.listen(server).on('connection', function(socket){
        sockets.push(socket);
       
        socket.on('sayHello', function (data) {
            console.log("sayHello = " + data);
            socket.emit("sayHello","Hello " + data); // send back to client
        });
       
        socket.on('sayGoodBye', function (data) {
            console.log("sayGoodBye = " + data);
            socket.emit("sayGoodBye","GoodBye " + data); // send back to client
        });
       
        socket.on('sayToAll', function (msg) {
                console.log('message received', msg);
               
                // send back to all client
                socket.broadcast.emit('sayToAll', msg);
                socket.emit('sayToAll', msg);
        });
});

//Emit a message to the client that we received a blank message from the php script. (Via POST)
function handleServerNotice(data){
        console.log("HTML Message Received: ", data);
}
// end  part2/server.js


//----------- Client Side ---------------//
อย่าลืมเอา socket.io.js ที่เป็น client script มาใส่ใน project ด้วยนะครับ
ผมใช้ WebWorker มาใช้นะครับ เผื่อจะใช้ร่วมกันหลายหน้า จะได้เปลี่ยนเป็น shared worker ได้ทันทีครับ


//----------------  part2/worker.js
importScripts('js/socket.io.js');
var socket;
self.onmessage = function (ev) {
   
      var data = ev.data;
    switch (data.cmd) {
       
  // connect
    case 'connect':
    {
        //self.postMessage("Client Connect ");
        self.postMessage({'type': 'status', 'msg': 'Client Connect '});
       
        var url = data.msg;
         socket = io.connect(url);
   
      socket.on('done', function () {
        self.postMessage({'type': 'status', 'msg': 'done!'});
      });
   
      socket.on('connect_failed', function () {
        self.postMessage({'type': 'status', 'msg': 'connect failed'});
      });
   
      socket.on('error', function () {
        self.postMessage({'type': 'status', 'msg': 'error'});
      });
     

      // listener sayHello send back from server
      socket.on('sayHello', function (data) {
        self.postMessage({'type': 'sayHello', 'msg': data}); // send from worker to web page
      });

      // listener sayGoodBye send back from server
      socket.on('sayGoodBye', function (data) {
        self.postMessage({'type': 'sayGoodBye', 'msg': data}); // send from worker to web page
      });

      // listener sayToAll send back from server
      socket.on('sayToAll', function (data) {
        self.postMessage({'type': 'sayToAll', 'msg': data}); // send from worker to web page
      });

    }
     
      break;
   
   
    // stop
    case 'disconnect':
        self.postMessage({'type': 'status', 'msg': 'Client Disconnect '});
      socket.disconnect();
     
      break;
   
    // send to Server
    case  'sayHello':
            socket.emit('sayHello',data.msg);
    break;
   
    // send to Server
    case  'sayGoodBye':
            socket.emit('sayGoodBye',data.msg);
    break;

    // send to Server
    case  'sayToAll':
            socket.emit('sayToAll',data.msg);
    break;
   
   
    default:
      //self.postMessage('Unknown command: ' + data.msg);
  };

}
// end worker.js

//----------------  part2/client.php
<!DOCTYPE HTML>
<html>
<head>
<title>NodeJS Part 2</title>

<script>
var worker = new Worker('worker.js');

worker.onmessage = function (event) {
    //alert(event.data);
    var data = event.data;
    switch (data.type) {
        case 'status' :
            document.getElementById('result').innerHTML = document.getElementById('result').innerHTML+data.msg+"<br/>";
            break;
        case 'data'  :
        ;
        break;
        case 'sayHello'  :
            document.getElementById('response').innerHTML = data.msg;
        break;

        case 'sayGoodBye'  :
            document.getElementById('response').innerHTML = data.msg;
        break;

        case 'sayToAll'  :
            document.getElementById('responseBroadcast').innerHTML = document.getElementById('responseBroadcast').innerHTML + data.msg +"<br/>";
        break;

    };


};

function sayHello(){
    var name = document.getElementById('name').value;
    var user = new Object();
    user.name = name;
    worker.postMessage({'cmd': 'sayHello', 'msg': JSON.stringify(user)});
}

function sayGoodBye(){
    var name = document.getElementById('name').value;
    var user = new Object();
    user.name = name;
    worker.postMessage({'cmd': 'sayGoodBye', 'msg': JSON.stringify(user)});
}

function sayToAll(){
    var name = document.getElementById('name').value;
    worker.postMessage({'cmd': 'sayToAll', 'msg': name});
}


function connect(){
worker.postMessage({'cmd': 'connect', 'msg': '127.0.0.1:1333'}); // connect at 127.0.0.1:1333
}

function disconnect(){
worker.postMessage({'cmd': 'disconnect', 'msg': ''});
}


// connect server at start up
connect();
</script>

</head>
<body>
<p>Status: <span id="result" /></p>

<!--
<input onclick="connect()" type="button" value="Connect" /> <input onClick="disconnect();" type="button" value="Disconnect" />
-->
<br/><br/>
Name : <input type="text" id="name" name="name" /> <br/>
<input onClick="sayHello();" type="button" value="Say Hello"/> <input onClick="sayGoodBye();" type="button" value="Say GoodBye"/> <input onClick="sayToAll();" type="button" value="Say To All"/>

<br/>
<br/>
Response : <br/>
<span id="response"></span>
<br/>
<br/>

Response Broadcast : <br/>
<span id="responseBroadcast"></span>
</body>
</html>
// end client.php



//------------------- Running -----------------//
อย่าลืมเปิด server ด้วยคำสั่ง node server.js นะครับ




อ้างอิง http://socket.io/