我如何在 google app 引擎上为 html5 创建 websocket

Posted 2023-02-23

技术标签:

【中文标题】我如何在 google app 引擎上为 html5 创建 websocket【英文标题】：how can i create a websocket on google app engine for html5 【发布时间】：2011-05-06 12:50:00 【问题描述】：

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

演示使用基于node.js的web socket服务器：websocket-server-node.js，

但我认为它无法部署在谷歌应用引擎上，

那么你知道如何在谷歌应用引擎上使用 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"  /></a>

</body>
</html>

【问题讨论】：

How can I run a WebSocket server on top of GAE?的可能重复 【参考方案1】：

您可以使用现有的基于 Python 的 WebSocket 服务器实现之一，但您不会在 AppEngine 上使用它，因为它是基于请求的，并且每个请求的最长生命周期为 30 秒，您需要一个VPS 或类似的东西，如果你想托管一个聊天服务器，在这种情况下，你也可以运行 Node.js 版本。

AppEngine 限制：http://code.google.com/appengine/docs/python/runtime.html#Quotas_and_Limits

【讨论】：

【参考方案2】：

我认为你应该等待 Channel API。

Channel API - Channel API 让您可以构建可以推送的应用程序内容直接发送到您的用户的浏览器（又名“彗星”）。没有更多的投票更新！

这已经是 SDK 的一部分，但不能在生产环境中使用。

Here 一段视频，展示了这项即将推出的新功能Here 一个带有多人琐事问答的演示应用程序

编辑： 可用SDK 1.4.0

【讨论】：

有相关文档吗？为什么我在 gae 的文档上找不到它？不，谷歌还没有正式发布它，所以它仍然没有记录（无论如何你可以在 dev_appserver 上摆弄它。看看演示应用程序）。现已发布并记录在案：code.google.com/appengine/docs/python/channel @JasonHall，Channel 是基于 WebSocket 标准还是 GAE 特有的技术？ AFAIK 频道在后台不使用 Web 套接字，我相信它使用悬挂的 HTTP GET 来实现相同的基本功能。不过，它在比网络套接字更多的浏览器上受支持，例如，GMail 聊天使用它。【参考方案3】：

请注意，现在已发布：http://code.google.com/appengine/docs/python/channel/

享受吧！

【讨论】：

对于希望尝试该示例的人们的一个小仅供参考：Java 概述上的链接code.google.com/appengine/docs/java/channel/… 应指向code.google.com/p/java-channel-tic-tac-toe。此外，在java-channel-tac-toe.appspot.com 有一个现场演示【参考方案4】：

是的，正如在对相关问题的评论中指出的那样：How can I run a WebSocket server on top of GAE?

使用来自 Typhoon 应用服务器的代码实现此功能的详细信息在此处详细介绍：https://code.google.com/p/typhoonae/wiki/WebSockets

您可能会遇到 30 秒超时问题，但正如其他地方所指出的，您可以让您的客户端每 25 秒左右重新连接到服务器以保持持续连接。将部分消息发送到多个套接字的边缘情况可能很棘手，但应该可以解决。

如果您将 javascript 用于客户端，则使用 Channels 可能更可取，因为 OP 似乎是这样。如果您有已经使用 WS 的现有代码，或者如果您需要支持尚不支持 Channels 的非 JS 客户端，那么 Websockets 可能会更容易。

【讨论】：

以上是关于我如何在 google app 引擎上为 html5 创建 websocket的主要内容，如果未能解决你的问题，请参考以下文章

如何在 Google App Engine 上为 BigQuery 设置截止日期

如何在 Google App Engine 上为社交新闻提要建模

无法在 Ec2 上为 Prestashop 选择任何有效的 SQL 引擎

在 Google App Engine 上为用 Python 编写的 Qualtrics 创建 Web 服务

在 Google App Engine 上部署 Django 项目

Android - 如何在 Google 地图上为 Google 徽标设置底部填充