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实现实时视频文字传输(2)

客户端 在支持WebSocket的浏览器中,可以直接在Javascript中通过WebSocket对象来实现通信。WebSocket对象主要通过onopen,onmessage,onclose即on...

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 中Web SQL 的使用示例

Web sql 是在浏览器模拟数据库,可以使用JS来操作SQL完成对数据的读写,但是这个东西目前支持的浏览器不多,而且其W3C规范已经停止支持,貌似其前景不是很明朗。 W3C 规范:http://ww...

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 图像相关元素

元素名称 元素含义 src 该属性指定图片文件所在的位置,该属性值既可以是相对路径,也可以是绝对路径. alt 该属性指定一段文本,该文本将作为该拖的提示信息. h...
  • MR_LP
  • MR_LP
  • 2016年01月20日 09:40
  • 535

微信公众号与HTML 5混合模式揭秘1——如何部署JSSDK

部署JSSDK不会太难,有时候需要一点后台知识,但也不是太难的那种,本节主要是用PHP作为后台参考语言,为了照顾初学者,把代码写的简单一点,实现最终目的是第一优先权。...
  • kgsew
  • kgsew
  • 2015年11月17日 15:15
  • 2392

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

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

移动开发中如何整合HTML 5和原生代码

使用HTML 5开发应用比起为每一种不同的平台从头开始编写代码,是一种能跨不同平台而代码量较少的一种方式。在这种情况下,大部分的用户界面,甚至全部的界面都可以通过HTML 实现。 AD:51CT...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML 5 WebSocket 示例
举报原因:
原因补充:

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