بازی آنلاین با HTML 5

[lmaghsoodi]

با سلام خدمت دوستان گرامی

تا آنجا که من مطلع هستم، html 5 و java script تحت کلاینت هستند، ولی هفته پیش وقتی از یکی از دوستان یک بازی آنلاین ساده خواستیم، گفت با HTML 5 این کار را بایستی انجام داد، آیا ایشون حق داشت؟ آخه بازی ای که با چند نفر باشه حتما یه کار کلاینت سروری است . یعنی MULtiplayer باشه، کلاینت سروری است، پس چرا ایشون می گفت این کار با HTML 5 ممکنه ؟!

[SCoder]

خوب html 5 بود که canvas رو بصورت استاندارد قرار داد ولی اگه بازی تک نفره باشه فقط تحت کلاینت میشه نوشت (و از sessionStorage و یا localStorage برای data استفاده کرد) ولی اگه این طور که میگید چندنفره اجرا بشه به طور هم زمان باید از socket.io و برنامه نویسی تحت سرور هم استفاده کنید تا اطلاعات کاربران و بازیباز ها بدون reload صفحه به سرور فرستاده بشه و سرور در پاسخ جوابی بدهد و برنامه تحت کلاینت مناسب با آن جواب بازی را تغییر دهد و

برای اطلاعات بیشتر درباره socket Programming میتوانید تحقیق کنید ...
و دوستتان برای این میگوید که از html5 باید استفاده بشود به خاطر این است که socket توسط html5 استاندارد و قابل استفاده شد ...

HTML5 - WebSockets. Web Sockets is a next-generation bidirectional communication technology for web applications which operates over a single socket and is exposed via a JavaScript interface in HTML 5 compliant browsers.

[ravand]

و دوستتان برای این میگوید که از html5 باید استفاده بشود به خاطر این است که socket توسط html5 استاندارد و قابل استفاده شد ...

HTML5 - WebSockets. Web Sockets is a next-generation bidirectional communication technology for web applications which operates over a single socket and is exposed via a JavaScript interface in HTML 5 compliant browsers.
خب تا جایی که میدونم سوکت برای ارتباط کاربران هست. وقتی html سمت کلاینت هست چطوری میشه از سوکت استفاده کرد؟ میشه بیشتر توضیح بدید؟

[SCoder]

همانطور که می دانید سوکت یه ارتباط دو طرفه بین سرور و کاربر باز میکند و نیاز به لود دوباره صفحه را از بین میبرد و با این ارتباط دو طرفه بعد از برقراری ما می توانیم هر اطاعاتی را با یک
Event خاص که خودمان اختصاص می دهیم به سمت سرور بفرستیم و در سمت سرور به آن
Event با نام خودش گوش دهیم و هر وقت که آن event از طرف Client فرستاده شد کار های لازم را متانسب با آن انجام دهیم و بعد از آن میتوانیم پیامی به طرف کاربر بفرستیم که در آن طرف نیز کار های لازم انجام شود (البته اگر نیاز هست )

اکنون با یک مثال این را طرح می کنیم بدین صورت که مثلا وقتی کار بر در بازی عمل خاصی را انجام داد متانسب با آن بازی چه در سمت کاربر و چه در سمت سرور کار های لازم انجام شود و کاربر تغییرات لازمه را مشاهده کند ...

یک کانکشن در سمت سرور :


var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
res.sendfile('index.html');
});

io.on('connection', function(socket){
console.log('a user connected');
});

http.listen(3000, function(){
console.log('listening on *:3000');
});


اکنون کار های لازم در سمت Client :



<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
</script>




اکنون در سمت سرور گوش میدهیم که ایا کانشکشنی برقرار شده یا نه :




io.on('connection', function(socket){


console.log('a user connected');


socket.on('disconnect', function(){


console.log('user disconnected');


});
});







اکنون در سمت کلاینت هر گاه کاربری به عنوان مثال مقدار سربازانش را در یازی (یا هر چیز دیگری میتواند باشد ) تغییر داد و
دکمه ثبت را زد
یک event به سمت سرور emit میکنیم و اطلاعات لازم را نیز میفرستیم و اسم این event را addToArmy میگذاریم اکنون داریم :


درسمت کلاینت :





<script>
var socket = io();
$(‘btn’).click(function(){
socket.emit(‘addToArmy’, $('armyEntry /*: this is the input field*/').val()); //data to //send


/* now the changes if we want on client after clicking the btn*/


return false;// means btn has done it’s work });</script>



اکنون در سمت سرور باید با این اونت خاص گوش دهیم و داریم :





io.on('connection', function(socket){
socket.on(‘addToArmy’, function(data){
console.log('armies added: ' + data);
/* now do the proper work on this data Like saving it in db or whatever*/
// on finish you can emit some data to client as well
io.emit(‘Added’, ‘the army increased/*this is the msg to send to client*/’);
});


});



اکنون در سمت کلاینت با این اونت گوش میکنیم و متناسب با آن عمل میکنیم :







socket.on(‘Added’, function(msg){
$('#messages').append($('<li>').text(msg));
});





و این شامل تغییراتی است که کاربر میبیند اکنون اگر بخواهیم تغییراتی که کاربر اعمال کرده را همه ببینند می توانیم :





io.on('connection', function(socket){
socket.broadcast.emit(data /*changes that this client has done */);
/*This data will send to all the connections except for this specificClient and everyone can see the changes and act properly*/
});






پس در واقع با این فرستادن و گوش کردن میتوانیم هر تغییری را اعمال کنیم .
موفق باشید ...

[ravand]

خب دستورات اولی که شما استفاده کردید node.js هست. که سمت سرور هم استفاده میشه.
شما طوری گفتید html5 که من فکر کردم شما فقط میخوای از html5 استفاده کنی. خب اگه میخوای از node.js استفاده کنی که میتونی از همون html4 هم استفاده کنی!

[SCoder]

خوب دوست عزیز اگه اطلاعات جایی ذخیره نشه که نمیشه به سایر کاربران مخابره بشه (لازم به node هم نبود من برای بیان این مثال عرض کردم هر زبان تحت سرور دیگری هم میشد)ولی منظور بنده با توجه به سوال دوستمان این بود که html 5 بود که به طور استاندارد و رسمی canvas و socket و
web worker و چند چیز دیگر را به tool box برنامه نویس اضافه کرد در حالی که حرف شما هم درست است هم میشود در html 4 و هم در xhtml استفاده کرد ولی منظور از html 5 استفاده از استاندارد های w3c می باشد ...

[ravand]

خوب دوست عزیز اگه اطلاعات جایی ذخیره نشه که نمیشه به سایر کاربران مخابره بشه (لازم به node هم نبود من برای بیان این مثال عرض کردم هر زبان تحت سرور دیگری هم میشد)ولی منظور بنده با توجه به سوال دوستمان این بود که html 5 بود که به طور استاندارد و رسمی canvas و socket و
web worker و چند چیز دیگر را به tool box برنامه نویس اضافه کرد در حالی که حرف شما هم درست است هم میشود در html 4 و هم در xhtml استفاده کرد ولی منظور از html 5 استفاده از استاندارد های w3c می باشد ...
خب من وقتی با node.js کار میکردم بدون نیاز به ذخیره کردن اطلاعات و از طریق پورت اطلاعات رو به کاربر دیگر ارسال میکردم.
من نمونه مثال ها رو با html5 برای سوکت توی نت دیدم. شما یه مثال ساده براش ندارید؟