`
javasalatu
  • 浏览: 726575 次
  • 性别: Icon_minigender_2
  • 来自: 北京
博客专栏
96df99eb-e89d-3228-9c8e-967fc745ec52
程序员的自我经营之道
浏览量:7715
文章分类
社区版块
存档分类
最新评论

HTML 5 WebSocket 示例

 
阅读更多

转载请保留作者信息:

作者: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. 测试


进一步阅读:


资源:

分享到:
评论

相关推荐

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

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

    JAVA+WebSocket聊天室(WebSocket示例)

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

    HTML5++WebSocket权威指南.pdf

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

    websocket示例

    websocket HTML5聊天示例,文件操作,块读写文件插件,提高上传下载速度

    websocket 示例发送广播

    http://localhost:8080/websocketServer/broadcast.html 发送广播 http://localhost:8080/websocketServer/client.html 接收消息

    websocket_demo:websocket示例,可发送接收json数据

    Websocket示例作者:卞荣成作者博客:作者网站:本项目采用“保持署名—非商用”创意共享4.0许可证。只要保持原作者署名和非商用,您可以自由地阅读、分享、修改。详细的法律条文请参见网站。用法1、在cmd中运行命令...

    WebSocket 示例

    WebSocket 协议是html5引入的一种新的协议,其目的在于实现了浏览器与服务器全双工通信。看了上面链接的同学肯定对过去怎么低效率高消耗(轮询或comet)的做此事已经有所了解了,而在websocket API,浏览器和服务器...

    websocket示例java

    springBoot基础websocket代码,超简单。配置pom.xml文件,后新增websocket配置类,加上websocket处理类和对应的页面就可以。代码出处:https://www.cnblogs.com/bianzy/p/5822426.html

    WebSocket示例

    OursNET.HTML5.Socket 有服务端的实现的关键代码都封装在这里 OursNET.HTML5.WebSvr 以WINFORM的方式启动服务,只有一句代码,有兴趣可以去完善一下,比如可以扩展显示所有信息的交互,可以群发等等 Oursnet.net :...

    WebSocket:WebSocket示例,HTML和NODE.JS作为客户端,NODE.JS作为服务端,带发送信息,广播信息,回调信息功能

    带发送信息,广播信息,回调信息功能使用方法:没有安装nodejs-websocket库的,需要先用npm先安装npm install -g nodejs-websocket装好后直接按顺序执行以下命令即可调用示例node server.jsnode client.jsHTML示例...

    WebSocket服务器端和客户端示例

    WebSocket服务器端和客户端示例,服务器端程序为.NetFrameWork4.5 WinForm,Websocket客户端示例为html+js(支持所有Websocket客户端)。

    html5 支持的websocket小案例源代码

    该rar包中的两个jar包是驱动包,此websocket必须在支持的服务器中运行,截至目前,tomcat 7支持的。如果你要跑程序时,必须把jar包去掉。不然会冲突,导致报错

    nodejs实现websocket服务与html+js聊天通信示例

    nodejs实现websocket服务与html+js聊天通信示例 1.先装一个nodeJs的模块,叫nodejs-websocket . 2.直接在nodeJs命令行中敲入:npm install nodejs-websocket回车就可以安装好了. 3.开始建立服务器了,因为有了nodejs...

    Spring4+Hibernate4+HTML5WebSocket简单应用示例

    NULL 博文链接:https://quarterlifeforjava.iteye.com/blog/2163576

    websocket 前后台示例

    websocket 前后台示例,中有前台的html原生代码不需要手动导入js,和后台的配置类和websocket的服务。

    C语言实现的websocket

    该资源用C语言实现的简易websocket测试程序,并附有web端的html页面辅助调试,供websocket学习者下载使用,理解websocket协议

    websocket-example:WebSocket用法示例

    WebSocket用法示例 安装 只需拉存储库或下载zip并打开react.html或vanilla.html 在线演示 React版本: : Vanilla JS版本: : 配置变更 您可以更改上次操作的限制或币种。 对于香草版 更改app.js中第1行和第3行的...

    html5 websocket

    绝对的新技术,教你怎样一步步使用websocket,有示例代码,下载绝对没错

    spring WebSocket示例详解

    websocket是Html5新增加特性之一,目的是浏览器与服务端建立全双工的通信方式,本篇文章主要介绍了spring WebSocket示例详解 ,有兴趣的可以了解一下。

    HTML5 WebSocket实现点对点聊天的示例代码

    主要介绍了HTML5 WebSocket实现点对点聊天的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

Global site tag (gtag.js) - Google Analytics