`
wjlgryx
  • 浏览: 308563 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

HTML5 WebSocket 示例

阅读更多

我们通过一个简单的例子来熟悉 HTML5 WebSocket。该例子服务端从 0 开始每秒递增一个整数并发送给客户端浏览器显示。准备:Jetty 7 ,Java Web 开发环境,Chrome 4+

服务端 Java 代码:
final public class CounterSocketServlet extends WebSocketServlet {

    @Override
    protected WebSocket doWebSocketConnect(final HttpServletRequest hsr,
                                          final String string) {
        return new CounterSocket();
    }

    final class CounterSocket implements WebSocket {

        private Outbound outbound;

        public void onConnect(final Outbound outbound) {
            System.out.println("onConnect");
            this.outbound = outbound;
        }

        public void onMessage(final byte frame, final String data) {
            System.out.println("onMessage");

            if (data.equals("Hello, Server!")) {
                new Thread() {

                    @Override
                    public void run() {
                        try {
                            outbound.sendMessage(frame, "Hello, browser :-)");

                            int i = 0;
                            while (true) {
                                sleep(1000);
                                outbound.sendMessage(frame, String.valueOf(i++));
                            }

                        } catch (final Exception e) {
                            System.err.println(e.getMessage());
                        }
                    }
                }.start();
            }
        }

        public void onMessage(final byte frame, final byte[] data,
                              final int offset, final int length) {
            throw new UnsupportedOperationException("Not supported yet.");
        }

        public void onDisconnect() {
            System.out.println("onDisconnect");
        }
    }
}

浏览器客户端 HTML 代码:
<html> 
    <head> 
        <title>WebSoket Demo</title> 
        <script type="text/javascript"> 
            if (!window.WebSocket) { 
                alert("WebSocket not supported by this browser!"); 
            } 

            function display() { 
                var valueLabel = document.getElementById("valueLabel"); 
                valueLabel.innerHTML = ""; 
                var ws = new WebSocket(
                    "ws://localhost:8080/WebSocketDemo/counter-socket"); 
                ws.onmessage = function(evt) { 
                    valueLabel.innerHTML = evt.data; 
                }; 

                ws.onclose = function() { 
                }; 

                ws.onopen = function() { 
                    ws.send("Hello, Server!"); 
                }; 
            } 
        </script> 
    </head> 
    <body onload="display();"> 
        <div id="valueLabel"></div> 
    </body> 
</html>
运行:

  1. 部署
      将打包好的 WebSocketDemo.war 复制到 Jetty 安装目录:



2. 启动 Jetty
      C:\jetty-distribution-7.0.1.v20091125>java -jar start.jar



  3. 测试

 

  • 大小: 30.3 KB
  • 大小: 10.4 KB
分享到:
评论

相关推荐

    C#WebSocket示例(初学者必备)

    在上述示例中,`websocketclient.html`可能是用于展示如何在网页端使用JavaScript与C# WebSocket服务器交互的代码。通常,HTML页面会使用WebSocket API(`WebSocket`对象)来创建与服务器的连接,并处理收发数据。 ...

    Springboot+Websocket示例

    接下来,我们将按照以下步骤构建这个"Springboot+Websocket示例": 1. **设置项目依赖**:在`pom.xml`中添加`spring-boot-starter-websocket`和`spring-boot-starter-thymeleaf`依赖。Thymeleaf是一个模板引擎,...

    .net websocket简单示例

    下面将详细介绍.NET中的WebSocket实现以及在给定的示例中需要注意的关键点。 首先,让我们从服务端开始。在.NET控制台程序中,我们可以创建一个WebSocket服务器,监听特定端口并处理连接请求。以下是一个简单的...

    Java版websocket示例

    客户端部分,本示例提供的`web.html`是一个简单的HTML页面,包含JavaScript代码来初始化WebSocket连接并发送/接收消息。JavaScript中的WebSocket对象用于与服务器通信,代码可能如下: ```html &lt;!DOCTYPE html&gt; ...

    html5的websocket代码示例包括错误解决方案

    在这个"html5的websocket代码示例包括错误解决方案"的讨论中,我们将深入探讨WebSocket的基本用法,常见问题以及在Tomcat7环境下如何配置和使用WebSocket。 首先,WebSocket API是建立在TCP连接上的,它允许持久化...

    HTML5WebSocket权威指南

    在HTML5WebSocket权威指南中,你将深入了解到WebSocket的原理、API用法、实战示例、以及最佳实践。这本书将帮助你熟练掌握WebSocket,构建高性能的实时Web应用程序。无论是初学者还是经验丰富的开发者,都能从中获益...

    Html5 WebSocket c++实例

    8. **示例代码**:提供的实例代码可能包含一个简单的HTML页面,其中JavaScript部分负责创建WebSocket连接并处理消息;同时,C++服务端代码将展示如何监听连接,接收和发送数据。 9. **调试工具**:开发WebSocket...

    C#WebSocket示例代码

    以下是对"C# WebSocket示例代码"的详细解释。 首先,创建WebSocket服务的关键在于设置一个监听WebSocket连接的HTTP端点。在ASP.NET Web应用程序中,我们通常在Global.asax.cs文件的Application_Start方法中配置...

    jetty html5 websocket服务器

    Jetty HTML5 WebSocket服务器是一种基于Java的轻量级Web服务器,它支持HTML5的WebSocket协议,使得实时双向通信成为可能。WebSocket是Web应用程序中的一个关键技术,它允许客户端和服务器之间建立持久连接,从而实现...

    JAVA+WebSocket聊天室(WebSocket示例)

    HTML5 WebSocket 的出现,可以实现服务端-客户端高效低功耗完美双向通信。可惜现在不是所有浏览器都支持HTML5,本例是对TOMCAT7.0.32自带的WebSocket功能展示,一个非常简单的聊天室。 代码说明 1、因为本例只做功能...

    HTML5++WebSocket权威指南.pdf

    WebSocket 领域最全面和系统的著作、三位资深html5技术专家共同编写;系统讲解 websocket 的API、协议、消息传输安全性和企业部署,并给出通过websocket协议通信的真实示例,可操作性强。

    Spring4+Hibernate4+HTML5WebSocket简单应用示例

    标题"Spring4+Hibernate4+HTML5WebSocket简单应用示例"指出,这个示例项目是关于如何在Java后端环境中整合Spring 4、Hibernate 4框架,并利用HTML5的WebSocket技术来实现实时通信。Spring是企业级Java应用的主流框架...

    C# WebSocket示例

    本示例将探讨如何使用C#通过WebSocket实现一个网页聊天室功能。 首先,我们需要创建WebSocket服务器。在C#中,我们可以使用HttpListener类监听WebSocket请求。HttpListener是HTTP服务器的基础,它可以处理包括...

    html页面测试websocket

    总的来说,这个“html页面测试websocket”项目为我们提供了一个简单的WebSocket客户端示例,展示了如何在HTML和JavaScript中使用WebSocket API与服务器进行双向通信。开发者可以基于这个基础,扩展出更复杂的应用,...

    完整websocket服务端vb2010工程项目示例

    WebSocket协议是HTML5的一部分,为实时Web应用程序提供了低延迟、高效率的解决方案。VB.NET是Microsoft开发的一种面向对象的编程语言,可以用于构建Windows桌面应用程序和Web应用程序。在VB2010版本中,虽然...

    使用 HTML5 WebSocket 构建实时 Web 应用

    ### 使用 HTML5 WebSocket 构建实时 Web 应用 #### HTML5 WebSocket 概述与重要性 HTML5 WebSocket 是一种新兴的技术,它被设计用于在客户端(通常是浏览器)与服务器之间建立持久的双向通信连接。这项技术对于...

    基于tomcat的websocket开发示例源码

    WebSocket是HTML5中引入的一种在单个TCP连接上进行全双工通信的协议,它极大地改进了Web应用程序的实时通信能力。在这个基于Tomcat的WebSocket开发示例中,我们将深入探讨如何利用WebSocket技术来实现服务器与客户端...

    h5websocket.zip

    在“h5websocket.zip”中,可能包含了一个完整的WebSocket示例,包括前端HTML、JavaScript代码以及后端服务器实现(可能是Node.js、Python的Flask或Django、Java的Spring Boot等)。通过解压并运行这个示例,你可以...

    PreactRedux+Websocket示例:为了好玩___下载.zip

    这个示例项目名为"PreactRedux+WebSocket示例:为了好玩___下载",并且包含了一个名为"redux-websocket-example-master"的压缩包,里面包含了实现这个功能的所有源代码。 **Preact简介** Preact是一个轻量级的...

    websocket示例

    在"websocket HTML5聊天示例"中,我们可以学习如何创建WebSocket连接、发送和接收消息以及处理连接状态的变化。以下是一些关键知识点: 1. **创建WebSocket连接**:首先,我们需要在JavaScript中创建一个WebSocket...

Global site tag (gtag.js) - Google Analytics