views/mud-move.php @@ -9,6 +9,7 @@ RewriteRule ^blog/(?P<year>\d{4})/(?P<month>\d{2})/(?P<day>\d{2})/(?P<slug>[-a-z RewriteRule ^mud$ views/mud.php [QSA,L] RewriteRule ^mud-say$ views/mud-say.php [QSA,L] RewriteRule ^mud-update$ views/mud-update.php [QSA,L] +RewriteRule ^mud-move$ views/mud-move.php [QSA,L] RewriteRule ^admin/blog/delete/(?P<id>\d+)$ views/admin/blog-post.php?id=$1&action=delete [QSA,L] RewriteRule ^admin/blog/edit(?:/(?P<id>\d+))?$ views/admin/blog-post.php?id=$1&action=edit [QSA,L] RewriteRule ^admin/blog(?:/(?P<page>\d+))?$ views/admin/blog.php?page=$1 [QSA,L] .htaccess @@ -9,6 +9,7 @@ $this->map_url('^/$', 'home') ->map_url('^/mud$', 'mud') ->map_url('^/mud-say$', 'mud-say') ->map_url('^/mud-update$', 'mud-update') + ->map_url('^/mud-move$', 'mud-move') ->map_url('^/admin/blog/delete/(?P<id>\d+)$', 'admin/blog-post', 'delete') ->map_url('^/admin/blog/edit(?:/(?P<id>\d+))?$', 'admin/blog-post', 'edit') ->map_url('^/admin/blog(?:/(?P<page>\d+))?$', 'admin/blog'); config.php @@ -5,9 +5,6 @@ var EAST = 4; var WEST = 8; var step = 10; - -var input_timeout = null; -var refresh_timeout = null; // }}} // {{{ init @@ -20,8 +17,14 @@ jQuery(function () { .attr('type', 'text') .appendTo('body'); - update_loop(); - game_loop(); + // place neighbours + for (i in neighbours) + { + place_avatar(neighbours[i]); + } + + setInterval(game_loop, 60); + update(); }); // }}} function game_loop() // {{{ @@ -64,20 +67,8 @@ function game_loop() // {{{ }); user.x = oLeft; user.y = oTop; - - if (input_timeout) - { - clearTimeout(input_timeout); - } - input_timeout = setTimeout(game_loop, 60); } // }}} -function update_loop() -{ - update(); - refresh_timeout = setTimeout(update_loop, 500); -} - function place_avatar(data) // {{{ { var avatar = document.createElement('div'); @@ -128,11 +119,10 @@ function say(avatar, msg) // {{{ bubble.find('.text').text(msg); } bubble.show(); - console.log(bubble); if (msg) { // hide the message after enough time to read it - var delay = 3000 + (text.split(' ').length * 250); + var delay = 3000 + (msg.split(' ').length * 250); setTimeout(function () { bubble.hide(); }, delay); return; } @@ -150,9 +140,8 @@ function say(avatar, msg) // {{{ .attr('fresh', 'true'); } // }}} -function enter_text(e) { - console.log(e.which); - +function enter_text(e) // {{{ +{ if ($(this).attr('fresh') == 'true' && e.which == 115) { // discard first keypress event, because it's the 's' @@ -164,9 +153,9 @@ function enter_text(e) { if (e.which == 13) { $.ajax({ - 'type': 'POST', - 'url': 'http://localhost/~andy.driver/pagezero/mud-say', - 'data': {'user': user.user, 'says': $(this).val()}, + "type": "GET", + "url": "http://localhost/~andy.driver/pagezero/mud-say", + "data": "user=" + user.user + "&says=\"" + $(this).val() + "\"", }); // re-enable game keyboard controls @@ -182,7 +171,7 @@ function enter_text(e) { $('#avatar-' + user.user + ' .speech-bubble .text').text($(this).val() + String.fromCharCode(e.which)); return true; -} +} // }}} function get_frame_x(state, frame) // {{{ { @@ -193,46 +182,53 @@ function get_frame_x(state, frame) // {{{ return frame; } // }}} -function update() +function update() // {{{ { + console.log('updating...'); $.ajax({ - 'type': 'GET', - 'url': 'http://localhost/~andy.driver/pagezero/mud-update', - 'data': {'user': user.user, 'x': user.x, 'y': user.y}, - 'dataType': 'json', - 'success': refresh + "type": "GET", + "url": "http://localhost/~andy.driver/pagezero/mud-update", + "data": "user=" + user.user, + "dataType": "json", + "success": function (o) { react(o); update(); }, + "error": function (xhr, msg, e) { console.log('error: ' + msg); update(); }, }); -} +} // }}} -function refresh(json) +function react(json) // {{{ { - for (i in json.neighbours) + last_id = json.last_id; + console.log(last_id + ': ' + json.result.length); + for (i in json.result) { - var avatar = json.neighbours[i]; - var sprite = $('#avatar-' + avatar.user); - if (sprite.length == 0) + var msg = json.result[i]; + switch (msg.type) { - place_avatar(avatar); - sprite = $('#avatar-' + avatar.user); + case 0: // avatar move + console.log('user ' + msg.user + ' moved to ' + msg.msg); + eval('var coords = ' + msg.msg); + var avatar = $('#avatar-' + msg.user); + avatar.animate({ + 'left': coords[0] + 'px', + 'top': coords[1] + 'px' + }, 'slow'); + break; + case 1: // avatar say + console.log('user ' + msg.user + ' said ' + msg.msg); + say(msg.user, eval(msg.msg)); + break; + case 2: // avatar enter + console.log('user ' + msg.user + ' entered'); + eval('var avatar = ' + msg.msg); + place_avatar(avatar); + break; + case 3: // avatar exit + console.log('user ' + msg.user + ' exited'); + $('#avatar-' + msg.user).remove(); + break; } - var oLeft = sprite.attr('offsetLeft'); - oLeft = (oLeft == avatar.x ? oLeft : avatar.x); - var oTop = sprite.attr('offsetTop'); - oTop = (oTop == avatar.y ? oTop : avatar.y); - sprite.animate({ - 'left': oLeft + 'px', - 'top': oTop + 'px' - }, 'slow'); } - var out = []; - for (i in json.chat) - { - var msg = json.chat[i]; - out.push(msg.user + ': "' + msg.msg + '"'); - say(msg.user, msg.msg); - } - //console.log(json.last_update + ': ' + out); -} +} // }}} function handle_key_down(e) // {{{ { @@ -304,5 +300,10 @@ function handle_key_up(e) // {{{ return true; } $('#avatar-' + user.user).attr('state', state); + $.ajax({ + "type": "GET", + "url": "http://localhost/~andy.driver/pagezero/mud-move", + "data": {"user": user.user, "x": user.x, "y": user.y}, + }); return false; } // }}} js/mud.js @@ -273,6 +273,16 @@ SQL; return $this->_cache[0]; } } + + function to_array() + { + $a = array(); + foreach ($this->items as $item) + { + $a[] = $item->to_array(); + } + return $a; + } } class BreveFilter lib/defer.php @@ -1,20 +1,9 @@ <?php -function get_last_update() -{ - $u = @$_COOKIE['last_update']; - if (!$u) - { - $u = '0'; - } - return $u; -} - function update_timestamp() { // set the user's last update time to now $ms = microtime(); $cs = (int)($ms * 1000); $now = date('YmdHis') . str_pad($cs, 3, '0', STR_PAD_LEFT); - setCookie('last_update', $now); return $now; } lib/mud.php @@ -26,3 +26,15 @@ breve()->register('MudChat') ->field('area', breve()->int(array('not_null' => TRUE))) ->field('msg', breve()->text(array('not_null' => TRUE))) ->field('at', breve()->text(array('not_null' => TRUE))); + +breve()->register('MudUpdate') + ->table('mud_update') + ->field('id', breve()->int(array('not_null' => TRUE, + 'autoincrement' => TRUE))) + ->field('at', breve()->text(array('not_null' => TRUE, + 'max_length' => 20))) + ->field('type', breve()->int(array('not_null' => TRUE))) + ->field('user', breve()->int(array('not_null' => TRUE))) + ->field('area', breve()->int(array('not_null' => TRUE))) + ->field('msg', breve()->text(array('not_null' => TRUE, + 'maxlength' => 255))); models/mud.php @@ -6,23 +6,16 @@ <link rel="stylesheet" type="text/css" href="<?php echo minim()->webroot ?>/css/mud.css"> <?php minim()->end_block('page_css') ?> -<?php minim()->def_block('page_js_head') ?> +<?php minim()->def_block('page_js_foot') ?> <script type="text/javascript"> var user = <?php echo json_encode($user->to_array()) ?>; +var neighbours = <?php echo json_encode($neighbours) ?>; </script> -<?php minim()->end_block('page_js_head') ?> - -<?php minim()->def_block('page_js_foot') ?> <script type="text/javascript" src="<?php echo minim()->webroot ?>/js/mud.js"></script> <?php minim()->end_block('page_js_foot') ?> <?php minim()->def_block('page_content') ?> User: <?php echo $user->user ?><br> Area: <?php echo $area ?><br> -Neighbours: <ul> -<?php foreach ($neighbours->items as $avatar): ?> - <li><?php echo $avatar->user ?></li> -<?php endforeach ?> -</ul> <textarea id="output"></textarea> <?php minim()->end_block('page_content') ?> templates/mud.php @@ -5,22 +5,16 @@ require_once minim()->lib('defer'); require_once minim()->lib('mud'); require_once minim()->models('mud'); -if (strtolower($_SERVER['REQUEST_METHOD']) == 'post') -{ - // get the user from the session - $user = $_POST['user']; //minim()->user(); +// get the user from the session +$user = $_REQUEST['user']; //minim()->user(); - $avatar = breve('MudUser')->filter(array('user__eq' => $user))->first; +$avatar = breve('MudUser')->filter(array('user__eq' => $user))->first; - $text = $_POST['says']; - $msg = breve('MudChat')->from(array( - 'user' => $user, - 'area' => $avatar->location, - 'msg' => $text, - 'at' => get_last_update() - ))->save(); -} -else -{ - header('Status: 500'); -} +$text = $_REQUEST['says']; +$msg = breve('MudUpdate')->from(array( + 'user' => $user, + 'area' => $avatar->location, + 'msg' => $text, + 'at' => update_timestamp(), + 'type' => 1 +))->save(); views/mud-say.php @@ -1,4 +1,6 @@ <?php +header('Content-Type: text/plain'); + require_once '../lib/minim.php'; require_once minim()->lib('breve-refactor'); require_once minim()->lib('defer'); @@ -6,44 +8,47 @@ require_once minim()->lib('mud'); require_once minim()->models('mud'); // get the user from the session -$user = $_GET['user']; //minim()->user(); - +$user = @$_GET['user']; //minim()->user(); $avatar = breve('MudUser')->filter(array('user__eq' => $user))->first; -// get any chat messages since last update -$chat = breve('MudChat')->filter(array( - 'area__eq' => $avatar->location, - 'user__ne' => $user, - 'at__gte' => get_last_update() -)); - -// get the area -$area = breve('MudArea')->get($avatar->location)->first; - -// get the user's neighbours -$neighbours = breve('MudUser')->filter(array( - 'user__ne' => $user, - 'location__eq' => $avatar->location -)); - -// set the user's last update time to now -$last_update = update_timestamp(); - -// if the user's x and y coords have changed, update -$x = @$_REQUEST['x']; -$y = @$_REQUEST['y']; -if (($x and $x != $avatar->x) or ($y and $y != $avatar->y)) +$last_id = @$_SESSION['last_id']; +if (!$last_id) { - $avatar->x = $x; - $avatar->y = $y; - $avatar->save(); + $last_id = update_timestamp(); } -header('Content-Type: text/json'); -minim()->render('mud_json', array( - 'user' => $avatar, - 'area' => $area->id, - 'neighbours' => $neighbours, - 'chat' => $chat, - 'last_update' => $last_update -)); +$msgs = array(); +$start = time(); +while (!$msgs and (time() - $start) < 1) +{ + // get any changes since last update + $msgs = breve('MudUpdate')->filter(array( + 'area__eq' => $avatar->location, + 'user__ne' => $user, + 'at__gte' => $last_id + ))->to_array(); + + if ($msgs) + { + $last_id = update_timestamp(); + $_SESSION['last_id'] = $last_id; + + // output json + echo json_encode(array( + 'result' => $msgs, + 'last_id' => $last_id + )), "\n"; + + flush(); + break; + } + usleep(500000); // 0.5s polling interval +} +if (!$msgs) +{ + echo json_encode(array( + 'result' => array(), + 'last_id' => $last_id, + 'debug' => join("\n", minim()->log_msgs) + )); +} views/mud-update.php @@ -19,5 +19,5 @@ $neighbours = breve('MudUser')->filter(array( minim()->render('mud', array( 'user' => $avatar, 'area' => $area->id, - 'neighbours' => $neighbours, + 'neighbours' => $neighbours->to_array(), )); views/mud.php 1224f089b8dc2de68a51484b45fbf13379487570 Andy Driver andy.driver@gcapmedia.com http://github.com/andyhd/minim/commit/ef51cc401e1171aaf2abd62b7b0b1bea267f2d33 ef51cc401e1171aaf2abd62b7b0b1bea267f2d33 2008-09-05T00:40:02-07:00 2008-09-05T00:40:02-07:00 Refactored MUD to use long polling AJAX, solves increasing delay problem e9866519ae532b6779b038e49805db04083e52c9 Andy Driver andy.driver@gcapmedia.com