2010-11-08 8 views
9

questo è il demo che un client di chat semplice, è necessario aprirlo sul browser webkit come: Chrome e Safari,Come si crea un websocket su App Engine di Google per HTML5

la demo utilizzare un server socket basato sul web su node.js: websocket-server-node.js,

ma penso che cant Distribuire sul motore di Google,

così lo sapevate come fare un websocket utilizzando pitone sul motore Google,

ed eseguendo la demo su di esso,

grazie

Questo è il codice:

<!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

possibile duplicato di [Come posso eseguire un server WebSocket su GAE?] (Http://stackoverflow.com/questions/4114902/how-can-i-run-a-websocket-server-on-top -of-gae) – systempuntoout

risposta

11

Credo che si dovrebbe aspettare che Canale API.

Channel API - L'API canale consente di creare applicazioni che possono spingere contenuti direttamente al browser del tuo utente (alias “Comet”). Non è più necessario il polling per gli aggiornamenti!

questo è già parte dell'SDK ma non funziona in produzione.

Here un video che mostrano questa nuova funzione imminente
Here un'applicazione dimostrativa con un multiplayer trivia-quiz

EDIT:
disponibile con SDK 1.4.0

+0

ha qualche documento a riguardo? perché non riesco a trovarlo sul doc di gae? – zjm1126

+0

No, Google non lo ha ancora rilasciato ufficialmente, quindi è ancora non documentato (comunque puoi giocarci su dev_appserver. Dai un'occhiata all'applicazione demo). – systempuntoout

+0

Questo è ora rilasciato e documentato: http://code.google.com/appengine/docs/python/channel/ –

0

Si potrebbe utilizzare una delle implementazioni di server websocket basato su Python che c'è là fuori, ma non si rendono lontano con che in AppEngine dal momento che è richiesta basata e ogni richiesta ha una durata massima di 30 secondi, avrete bisogno di un VPS o qualcosa di simile, se si desidera ospitare un server di chat, e in tal caso, si potrebbe anche eseguire la versione Node.js.

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

4

Si noti che questo ora è stato rilasciato: http://code.google.com/appengine/docs/python/channel/

Divertiti!

+0

Una piccola FYI per le persone che cercano di provare l'esempio: il link nella panoramica di Java http://code.google.com/appengine/docs/java/channel/overview.html#Example_Tic_Tac_Toe_Application deve puntare a http: // code .google.com/p/java-channel-tic-tac-toe /. Inoltre, c'è una demo live su http://java-channel-tac-toe.appspot.com – ide

1

Sì, è possibile, come è stato sottolineato in un commento su una questione connessa: How can I run a WebSocket server on top of GAE?

I dettagli di attuazione del presente codice utilizzando dal server Typhoon app sono dettagliati qui: https://code.google.com/p/typhoonae/wiki/WebSockets

Si può avere difficoltà con il problema del timeout di 30 secondi, ma come indicato altrove, è possibile che il client si ricolleghi al server ogni 25 secondi circa per mantenere una connessione costante. I casi limite in cui i messaggi parziali sono inviati a più di un socket possono essere complicati ma dovrebbero essere risolvibili.

L'utilizzo dei canali è probabilmente preferibile se si utilizza Javascript per il client, come sembra essere l'OP. Websocket può essere più facile se si dispone di codice esistente che già utilizza WS o se è necessario supportare client non JS che non dispongono ancora del supporto di Canali.