html5-websocket聊天例子
??? http://html5demos.com/web-socket
?
?
<!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 href="http://www.w3.org/html/logo/"> <img src="http://www.w3.org/html/logo/badge/html5-badge-h-connectivity-device-graphics-multimedia-performance-semantics-storage.png" width="325" height="64" alt="html5-websocket聊天事例" title="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage"> </a> <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="html5-websocket聊天事例" /></a> <script src="http://html5demos.com/js/prettify.packed.js"></script> <script> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script> <script> try {var pageTracker = _gat._getTracker("UA-1656750-18");pageTracker._trackPageview();} catch(err) {}</script> </body> </html> ?