`

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

 

分享到：
| Windows API所提供的功能可以归为七类
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    spring-boot-websocket-client代码示例

    WebSocket API允许开发者创建高效、低延迟的实时应用，如聊天室、股票报价、在线游戏等。 ### 创建WebSocket配置 首先，我们需要配置WebSocket端点。在Spring Boot中，这通常通过实现`WebSocketConfigurer`接口来...

    ios-websocket js例子.rar

    WebSocket API是HTML5的一个新特性，它为创建持久的、全双工的连接提供了标准方法。传统的HTTP协议在每次请求/响应交互后都会断开连接，而WebSocket则可以在单个连接上保持开放，直到一方主动关闭。这使得实时应用如...

    java-ee7-html5-websocket-example

    WebSocket协议允许服务器和客户端之间建立持久的连接，使得数据能够实时双向传输，这对于构建聊天应用、在线游戏、股票交易等需要实时交互的场景非常有用。 在"java-ee7-html5-websocket-example"项目中，我们将...

    websocket+spring

    在实际应用中，WebSocket常用于实时性要求高的场景，如股票交易、在线聊天、游戏同步等。结合Spring的强大功能，可以轻松构建复杂的应用系统，提供流畅的实时用户体验。 这个"websocket-spring"压缩包文件很可能...

    Java-WebSocket-1.3.9.jar

    WebSocket协议是HTML5的一部分，它允许服务器和客户端之间建立持久的连接，从而在无需频繁建立新连接的情况下进行实时数据交换。这种协议对于需要实时交互的应用，如在线游戏、聊天应用或股票交易系统等，特别有用。...

    springboot-websocket .rar

    WebSocket协议是HTML5引入的一种在单个TCP连接上进行全双工通信的协议，它允许服务器主动向客户端推送数据，极大地提高了交互性。在SpringBoot框架下，集成WebSocket可以让开发者轻松构建支持实时通信的应用，比如...

    websocket聊天室，学习websocket的好例子。

    WebSocket是Web交互技术的...为了学习这个例子，你需要解压文件，理解每个部分的作用，然后可以在本地的Tomcat环境中部署和运行这个WebSocket聊天室应用。通过这种方式，你可以深入理解WebSocket的工作原理和实际应用。

    使用Sec-Websocket-Protocol

    在HTML5中被引入，极大地改善了网页应用的实时性。与传统的HTTP请求-响应模式不同，Websocket一旦建立连接，就可以在两端之间持续传输数据，无需反复发起请求。 在"使用Sec-Websocket-Protocol"的场景中，`Sec-...

    Java-WebSocket_javawebsocketsdemo_someiuu_javawebsocket_websocke

    Java WebSocket 是一种在客户端和服务器之间建立长连接的协议，它是HTML5标准的一部分，提供了全双工通信的能力，使得数据可以双向实时传输。这个“Java-WebSocket_javawebsocketsdemo_someiuu_javawebsocket_...

    小程序-WebSocket.rar

    WebSocket是HTML5引入的一种在单个TCP连接上进行全双工通信的协议。相比于传统的HTTP请求，WebSocket允许持久连接，减少不必要的连接建立和关闭，极大地提高了实时数据传输的效率。 二、微信小程序与WebSocket 微信...

    Spring-Boot-Jetty-WebSocket-Example:如何使用Spring Boot配置Jetty WebSocket的基本示例

    2. **WebSocket API**：WebSocket是HTML5引入的一种协议，它允许在客户端和服务器之间建立长连接，实现双向通信。相比传统的HTTP请求，WebSocket提供更低的延迟和更高的效率。 3. **Jetty服务器**：Jetty是一个轻量...

    express- websocket

    为了更好地理解如何在实际项目中应用这些技术，让我们考虑一个具体的例子——一个简单的在线聊天室应用。在这个应用中，多个用户可以通过WebSocket连接到服务器，实现消息的实时传输。具体实现步骤包括： 1. **前端...

    WebSocket实现web网络聊天例子

    这个简单的WebSocket聊天应用实例，可以帮助初学者理解WebSocket的工作原理，以及如何在实际项目中使用WebSocket实现网络通信。通过研究和修改代码，你可以进一步了解WebSocket的细节，以及如何构建更复杂的实时Web...

    基于Python与HTML5的websocket聊天室.zip

    这个“基于Python与HTML5的websocket聊天室”项目，结合了后端Python技术和前端HTML5技术，创建了一个实时的在线聊天应用。在此，我们将深入探讨WebSocket的核心概念、Python的WebSocket服务器实现以及HTML5在构建...

    webSocket 聊天室 demo

    总之，"webSocket 聊天室 demo"是一个实践WebSocket协议和实时通信的好例子，通过学习这个项目，开发者可以深入理解WebSocket的工作原理，以及如何利用它来创建互动性强的实时应用，如聊天室、游戏、股票交易系统等...

    HTML5 WebSocket权威指南

    《HTML5 WebSocket权威指南》是HTML5 WebSocket领域最权威的著作之一，它系统、全面地讲解了HTML5 WebSocket的各个方面，是Web开发人员和架构师学习WebSocket的最佳选择。书中讨论了基于WebSocket的架构师如何减少...

    VB6.0 实现WebSocket 例子.7z

    在Web开发中，WebSocket常用于实现聊天室、实时图表、在线游戏等需要低延迟、高效率通信的场景。VB6.0，即Visual Basic 6.0，虽然相对较老，但仍被许多开发者用于编写桌面应用程序。然而，VB6.0本身并不直接支持...

    websocket小例子

    这使得WebSocket非常适合实时通信场景，如在线聊天、股票交易、多人游戏等。 在WebSocket小例子中，我们通常会涉及以下几个关键概念： 1. **握手（Handshake）**：WebSocket连接的建立始于一个HTTP升级请求，这个...

    html5 websocket 例子

    在这个“html5 websocket 例子”中，我们将探讨如何在Node.js v0.8.9环境下实现WebSocket服务器和客户端的交互。 首先，WebSocket协议的引入是为了克服传统HTTP协议的限制，HTTP协议是一种无状态、单向的请求-响应...

    webSocket例子

    - **客户端实现**：在HTML5中，`WebSocket`对象是与WebSocket服务器通信的主要接口。我们需要创建WebSocket实例，指定服务器地址，监听连接状态变化（如`open`、`message`、`error`、`close`事件），并通过`send()`...

Magicbox
Global site tag (gtag.js) - Google Analytics