如何在Google App Engine上为HTML5创建WebSocket
这是一个简单聊天客户端的演示，你需要在像Chrome和Safari这样的webkit浏览器上打开它。
这个演示使用了一个基于node.js的websocket服务器：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" alt="Fork me on GitHub" /></a>
</body>
</html>
4 个回答
1
是的，你可以这样做，正如在一个相关问题的评论中提到的： 我该如何在GAE上运行一个WebSocket服务器？
关于如何使用Typhoon应用服务器的代码来实现这一点，详细信息可以在这里找到： https://code.google.com/p/typhoonae/wiki/WebSockets
你可能会遇到30秒超时的问题，但正如其他地方提到的，你可以让你的客户端每25秒左右重新连接到服务器，以保持一个持续的连接。对于那些部分消息发送到多个socket的边缘情况，可能会有点棘手，但应该是可以解决的。
如果你使用Javascript作为客户端，使用Channels可能更好，因为提问者似乎是这样做的。不过，如果你已经有使用WebSocket的现有代码，或者需要支持那些还不支持Channels的非JS客户端，使用WebSocket可能会更简单。
4
请注意，这个已经发布了：http://code.google.com/appengine/docs/python/channel/
希望你喜欢！