javascript - 我如何在谷歌应用引擎上为 html5 创建一个 websocket

标签 javascript python google-app-engine html websocket

这是demo一个简单的聊天客户端,你必须在 webkit 浏览器上打开它,比如:chrome 和 Safari,

该演示使用基于 node.js 的 web 套接字服务器:websocket-server-node.js,

但我认为它不能部署在谷歌应用引擎上,

那么你知道如何在 google app engine 上使用 python 制作 websocket 吗,

并在其上运行演示,

谢谢

这是代码:

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

最佳答案

我认为您应该等待 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!

这已经是 SDK 的一部分,但在生产环境中不起作用。

Here展示这项即将推出的新功能的视频
Here带有多人问答游戏的演示应用程序

编辑:
可用 SDK 1.4.0

关于javascript - 我如何在谷歌应用引擎上为 html5 创建一个 websocket,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4121920/

相关文章:

java - 如何对按钮单击使用react以更改 map 中的参数?

javascript - 从 javascript 加载 jquery 库时出现错误$未定义

python - 用 Python 构建随机列表

python - Jinja2 for 循环条件

javascript - Google Analytics 如何使用analytics.js 以编程方式检测移动流量?

python - 我的 if 语句有什么问题? Python

python - 尝试将预测带回到数据帧中的相应行

google-app-engine - 用于 Google App Engine 的 Java MVC

algorithm - 分摊分布(和百分位数)的计算,适用于 App Engine?

javascript - 如何在 JSP 页面中获取 JavaScript session 属性?