html5-websocket聊天例子

最新推荐文章于 2023-08-03 00:03:56 发布

iteye_20727

最新推荐文章于 2023-08-03 00:03:56 发布

阅读量92

点赞数

分类专栏： HTML5页面脚本文章标签：网络 json javascript ViewUI

本文链接：https://blog.csdn.net/iteye_20727/article/details/82089493

版权

HTML5页面脚本专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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 &amp; 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 = {
      '<' : '&lt;',
      '>' : '&gt;',
      '&' : '&amp;'
    };
 
 
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><a id="html5badge" 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 Powered with Connectivity / Realtime, Device Access, Graphics, 3D &amp; Effects, Multimedia, Performance &amp; Integration, Semantics, and Offline &amp; Storage" title="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D &amp; Effects, Multimedia, Performance &amp; Integration, Semantics, and Offline &amp; 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="Fork me on GitHub" /></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>

iteye_20727

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5-websocket聊天例子

http://html5demos.com/web-socket &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset=utf-8 /&gt; &lt;meta name="viewport" content="width=620" /&
复制链接

扫一扫