2010-11-08 13 views
9

c'est le demo qu'un simple client de chat, vous devez ouvrir le navigateur WebKit comme: Chrome et Safari,comment puis-je créer un websocket sur Google App Engine pour html5

la démo utilise un serveur socket basé sur le Web sur Node.js: websocket-server-Node.js,

mais je pense qu'il ne peut pas déployer sur Google App Engine,

donc saviez-vous comment faire un websocket en utilisant python sur Google App Engine,

et lancer la démo dessus,

grâce

Voici le code:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset=utf-8 /> 
<meta name="viewport" content="width=620" /> 
<title>HTML5 Demo: Web Socket</title> 
<link rel="stylesheet" href="http://html5demos.com/css/html5demos.css" type="text/css" /> 
<script src="http://html5demos.com/js/h5utils.js"></script></head> 
<body> 
<section id="wrapper"> 
    <header> 
     <h1>Web Socket</h1> 
    </header> 
<style> 
#chat { width: 97%; } 
.them { font-weight: bold; } 
.them:before { content: 'them '; color: #bbb; font-size: 14px; } 
.you { font-style: italic; } 
.you:before { content: 'you '; color: #bbb; font-size: 14px; font-weight: bold; } 
#log { 
    overflow: auto; 
    max-height: 300px; 
    list-style: none; 
    padding: 0; 
/* margin: 0;*/ 
} 
#log li { 
    border-top: 1px solid #ccc; 
    margin: 0; 
    padding: 10px 0; 
} 
</style> 
<article> 
    <form> 
    <input type="text" id="chat" placeholder="type and press enter to chat" /> 
    </form> 
    <p id="status">Not connected</p> 
    <p>Users connected: <span id="connected">0</span></p> 
    <p>To test, open two windows with Web Socket support, type a message above and press return.</p> 
    <p>The server side code is available here: <a href="http://github.com/remy/html5demos/tree/master/server/">node-web-socket & server</a> (note that it runs on <a href="http://nodejs.org/" title="node.js">nodejs</a>)</p> 
    <ul id="log"></ul> 
</article> 
<script> 
function openConnection() { 
    // uses global 'conn' object 
    if (conn.readyState === undefined || conn.readyState > 1) { 
    conn = new WebSocket('ws://node.remysharp.com:8001');  
    conn.onopen = function() { 
     state.className = 'success'; 
     state.innerHTML = 'Socket open'; 
    }; 

    conn.onmessage = function (event) { 
     var message = JSON.parse(event.data); 
     if (typeof message == 'string') { 
     log.innerHTML = '<li class="them">' + message.replace(/[<>&]/g, function (m) { return entities[m]; }) + '</li>' + log.innerHTML; 
     } else { 
     connected.innerHTML = message; 
     } 
    }; 

    conn.onclose = function (event) { 
     state.className = 'fail'; 
     state.innerHTML = 'Socket closed'; 
    }; 
    } 
} 

var connected = document.getElementById('connected'), 
    log = document.getElementById('log'), 
    chat = document.getElementById('chat'), 
    form = chat.form, 
    conn = {}, 
    state = document.getElementById('status'), 
    entities = { 
     '<' : '<', 
     '>' : '>', 
     '&' : '&' 
    }; 


if (window.WebSocket === undefined) { 
    state.innerHTML = 'Sockets not supported'; 
    state.className = 'fail'; 
} else { 
    state.onclick = function() { 
    if (conn.readyState !== 1) { 
     conn.close(); 
     setTimeout(function() { 
     openConnection(); 
     }, 250); 
    } 
    }; 

    addEvent(form, 'submit', function (event) { 
    event.preventDefault(); 

    // if we're connected 
    if (conn.readyState === 1) { 
     conn.send(JSON.stringify(chat.value)); 
     log.innerHTML = '<li class="you">' + chat.value.replace(/[<>&]/g, function (m) { return entities[m]; }) + '</li>' + log.innerHTML; 

     chat.value = ''; 
    } 
    }); 

    openConnection(); 
} 

</script> <footer><a href="/">HTML5 demos</a>/<a id="built" href="http://twitter.com/rem">@rem built this</a>/<a href="#view-source">view source</a></footer> 
</section> 
<a href="http://github.com/remy/html5demos"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" /></a> 

</body> 
</html> 
+2

duplication possible de [Comment puis-je exécuter un serveur WebSocket au-dessus de GAE?] (Http://stackoverflow.com/questions/4114902/how-can-i-run-a-websocket-server-on-top -of-gae) – systempuntoout

Répondre

11

Je pense que vous devriez attendre Channel API.

Channel API - Channel API vous permet de créer des applications qui peuvent pousser contenu directement sur le navigateur de votre utilisateur (alias « Comet »). Plus d'interrogation pour les mises à jour!

Ceci fait déjà partie du SDK mais ne fonctionne pas en production.

Here une vidéo qui montrent cette nouvelle fonctionnalité à venir
Here une application de démonstration avec un trivia quiz multijoueur

EDIT:
disponible avec SDK 1.4.0

+0

a des doc à ce sujet? pourquoi je ne peux pas le trouver sur doc de gae? – zjm1126

+0

Non, Google ne l'a pas encore officiellement publié, donc il n'est toujours pas documenté (vous pouvez quand même le bidouiller avec dev_appserver, regardez l'application de démonstration). – systempuntoout

+0

Ceci est maintenant disponible et documenté: http://code.google.com/appengine/docs/python/channel/ –

0

Vous pouvez utiliser l'une des implémentations WebSocket Server à base de Python qui est là-bas, mais vous ne le ferez pas loin avec cela sur AppEngine puisqu'il est La requête est basée et chaque requête a une durée de vie maximum de 30 secondes, vous aurez besoin d'un VPS ou quelque chose comme ça, si vous voulez héberger un serveur de chat, et dans ce cas, vous pouvez tout aussi bien exécuter la version Node.js.

AppEngine Limites: http://code.google.com/appengine/docs/python/runtime.html#Quotas_and_Limits

4

Notez que cela a été publié: http://code.google.com/appengine/docs/python/channel/

Profitez-en!

+0

Un petit indice pour les personnes qui cherchent à essayer l'exemple: le lien sur l'aperçu Java http://code.google.com/appengine/docs/java/channel/overview.html#Example_Tic_Tac_Toe_Application doit pointer vers le code http: // .google.com/p/java-channel-tic-tac-toe /. En outre, il y a une démonstration en direct à http://java-channel-tac-toe.appspot.com – ide

1

Oui, vous pouvez, comme cela a été souligné dans un commentaire sur une question connexe: How can I run a WebSocket server on top of GAE?

Les détails de la mise en œuvre de ce code à l'aide du serveur d'applications Typhoon sont détaillées ici: https://code.google.com/p/typhoonae/wiki/WebSockets

Vous pourriez avoir des difficultés avec le problème du délai d'expiration de 30 secondes, mais comme cela a été signalé ailleurs, vous pouvez demander à votre client de se reconnecter au serveur toutes les 25 secondes pour conserver une connexion constante. Les cas de contournement où des messages partiels sont envoyés à plus d'une socket peuvent être difficiles mais doivent être résolus.

L'utilisation de canaux est probablement préférable si vous utilisez Javascript pour le client, comme le OP semble l'être. Websockets peut être plus facile si vous avez déjà du code qui utilise déjà WS ou si vous avez besoin de prendre en charge des clients non-JS qui n'ont pas encore de support de canaux.