HTML 5 WebSocket 示例

原创 2010年01月01日 20:08:00

转载请保留作者信息:

作者:88250

时间:2010 年 1 月 1 日


     我们通过一个简单的例子来熟悉 HTML 5 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. 测试


进一步阅读:


资源:

版权声明:欢迎加入开源技术 Q 群:242561391,让学习和分享成为一种习惯!

相关文章推荐

Html 5 Websocket 通信 学习的一些感悟

1,初识IM与Websocket 我的毕业设计的题目是“基于html5 websocket的IM系统设计与实现 ”,当时选题是冲着我们的一个教C语言的老师去的,对于什么html5 ?IM不甚了解。然...

用HTML 5的WebSocket实现网络聊天室

演示效果如下: 客户端具体代码如下: HTML5 websocket 网页聊天室 javascript php body,p{margin:0px; padding:0...

html 5 拖拽示例代码

发现了一个小知识点: var members=document.querySelectorAll('#member li');members 是nodelist 对象,而不是数组,有长度,但是不能遍历...

Java EE HTML5 WebSocket 示例

英文原文:Java EE HTML5 WebSocket example 在本教程中,我们将借助于Java EE的WebSocket(服务器端)实现一个HTML5的WebSocket连接。 1. 介...

HTML 5 <input> placeholder 属性

今天老大让我研究一下像百度、163

离线iOS应用的HTML 5制作指南

你或许已沮丧许久。众多Objective-C开发高手凭借制作iOS应用取得显著成就。你或许尝试阅读iOS应用开发指南,但Objective-C或类似语言确实没那么简单。 我不是说应该放弃目标,你...

HTML 5游戏市场究竟有多大?

编者按:本文编译自SM的“The market for HTML5 gaming”一文,部分内容有删改。   正如我最近在博客中写道的那样,我坚信2012会是HTML 5移动游戏大展身手的一年。...

最好的HTML 5编码教程和参考手册分享

今天我们介绍相关HTML5的参考手册,演讲稿,电子书和教程。HTML5是新兴的web技术,虽然不是完全的新技术但是已经有很多的相关文章介绍HTML5,特别是当我们谈论HTML5将成为Flash的替代品...

李麟杰专栏:HTML 5决战flash

在新的网络时代,现有的HTML技术已经不能满足富互联网应用程序的需求,这让Web开发人员对HTML 5的期待愈发的强烈,HTML 5是响应互联网最新变化的产物,尽管离这一标准的通过及实施还是一个长期的...

学习HTML 5编程和设计

原文转载自: http://coolshell.cn/articles/4795.html ★ HTML5 Rocks : Major Feature Groups  的学习 HTML5 的资源 (H...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)