开发者

how can i create a websocket on google app engine for html5

开发者 https://www.devze.com 2023-01-23 19:04 出处:网络
this is the demo that a Simple chat client , you must open it on webkit Browser like: chrome and Safari,

this is the demo that a Simple chat client , you must open it on webkit Browser like: chrome and Safari,

the demo use a web socket server based on node.js: websocket-server-node.js,

but i think it cant Deploy on google app engine ,

so did you know how to make a websocket using python on google app engine ,

and running the demo on it ,

thanks

this is the code :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=620" />
<tit开发者_如何学编程le>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>


I think you should wait for Channel API.

Channel API - The Channel API lets you build applications that can push content directly to your user’s browser (aka “Comet”). No more polling for updates!

this is already part of the SDK but does not work in production.

Here a video that show this new upcoming feature
Here a demo application with a multiplayer trivia-quiz

EDIT:
available with SDK 1.4.0


Note that this has now been released: http://code.google.com/appengine/docs/python/channel/

Enjoy!


Yes you can, as was pointed out in a comment on a related question: How can I run a WebSocket server on top of GAE?

The details of implementing this using code from the Typhoon app server are detailed here: https://code.google.com/p/typhoonae/wiki/WebSockets

You may have difficulties with the 30 second timeout issue, but as has been pointed out elsewhere, you can cause your client to reconnect to the server every 25 seconds or so to preserve a constant connection. Edge cases where partial messages are sent to more than one socket may be tricky but should be solvable.

Using Channels is probably preferable if you are using Javascript for the client, as the OP seems to be. Websockets may be easier though if you have existing code that already uses WS or if you need to support non-JS clients that do not yet have Channels support.


You could use one of the Python based WebSocket Server implementations that's out there, but you won't make it far with that on AppEngine since it's request based and every request has a maximum lifetime of 30 seconds, you'll need a VPS or something the like, if you want to host a chat server, and in that case, you could just as well run the Node.js version.

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

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号