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

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" />
<title>HTML5 Demo: Web Socket</title>
<link rel="stylesheet" href=".css" type="text/css" />
<script src=".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="/">node-web-socket & server</a> (note that it runs on <a href="/" 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: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="">@rem built this</a>/<a href="#view-source">view source</a></footer> 
</section>
<a href=""><img style="position: absolute; top: 0; left: 0; border: 0;" src=".png" alt="Fork me on GitHub" /></a>

</body>
</html>

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" />
<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>

Share Improve this question edited Nov 8, 2010 at 7:28 asked Nov 8, 2010 at 7:15 zjm1126 35.7k53 gold badges125 silver badges167 bronze badges

2 possible duplicate of How can I run a WebSocket server on top of GAE? – systempuntoout Commented Nov 8, 2010 at 8:35

Add a comment |

4 Answers 4

Sorted by: Reset to default 11

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - how can i create a websocket on google app engine for html5 - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)