WebSockets กับเว็บแชทขั้นพื้นฐาน ตอนที่ 3
จากเดิมที่เรามารู้จักกับ concept ทั้งหมด รวมถึงการทำงานในทาง Server ไปแล้วนั้น เราจะมาดูวิธีการทำงานของทาง Client กันบ้าง
*** code ของ client ทั้งหมดอยู่ ณ บทความตอนที่ 2
ส่วนที่ 1
<div id='body'>
<textarea id='log' name='log' readonly='readonly'></textarea><br/>
<input type='text' id='message' name='message' />
</div>
คือส่วนของการแสดงผลหลัก
ส่วนที่ 2
$(document).ready(function() {
log('Connecting...');
Server = new FancyWebSocket('ws://127.0.0.1:9300');
$('#message').keypress(function(e) {
if ( e.keyCode == 13 && this.value ) {
log( 'You: ' + this.value );
send( this.value );
$(this).val('');
}
});
//Let the user know we're connected
Server.bind('open', function() {
log( "Connected." );
});
//OH NOES! Disconnection occurred.
Server.bind('close', function( data ) {
log( "Disconnected." );
});
//Log any messages sent from server
Server.bind('message', function( payload ) {
log( payload );
});
Server.connect();
});
Server = new FancyWebSocket('ws://127.0.0.1:9300');
// คือการสร้างตัวแปร Server เพื่อรองรับการ connect Web Socket ไปยัง ip 127.0.0.1 ที่ port 9300 ที่ได้ setting เอาไว้ที่ Code ทาง Server
// การ bind open เข้าไป เมื่อมีการสั่ง connect ก็จะทำงานตัวนี้
Server.bind('open', function() {
log( "Connected." );
});
// การ bind close เข้าไป พูดง่ายๆคือ เมื่อปิดหน้านี้ไป จะทำการ Disconnect
Server.bind('close', function( data ) {
log( "Disconnected." );
});
// การ bind message เข้าไป คือเมื่อมี Message จากผู้ใช้อื่นๆเข้ามา ก็จะผ่านตัวนี้
Server.bind('message', function( payload ) {
log( payload );
});
// เชื่อมต่อ Web Socket
Server.connect();
// ฟังก์ชันสำหรับการส่งข้อความไปยัง web socket
// โดย send ค่าใน text ไปยัง Server
function send( text ) {
Server.send( 'message', text );
}
// คือ ฟังก์ชันสำหรับการเพิ่มผลลัพธ์ เพื่อแสดงผลในส่วนแสดงผลหลัก
function log( text ) {
$log = $('#log');
//Add text to log
$log.append(($log.val()?"\n":'')+text);
//Autoscroll
$log[0].scrollTop = $log[0].scrollHeight - $log[0].clientHeight;
}
ไม่มีความคิดเห็น:
แสดงความคิดเห็น