html5 websockt 示例

最新推荐文章于 2021-06-30 20:11:49 发布
最新推荐文章于 2021-06-30 20:11:49 发布
阅读量303 收藏
点赞数
分类专栏： html5 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zz_xyz/article/details/84292304
版权
[img]http://dl.iteye.com/upload/attachment/0074/0715/da2ea844-03d3-382f-8ec5-adc4471a6786.png[/img]
示例演示：你每次输入hello 然后点【发送】，页面上的数字就+1
结果如图：

[img]http://dl.iteye.com/upload/attachment/0074/0717/e8f740b5-c846-383f-884b-25365e0f1571.png[/img]

代码如下：

<html>
<head>
<title>WebSoket Demo</title>
<script type="text/javascript">
//浏览器不支持 websocket

if (!window.WebSocket) {
alert("WebSocket not supported by this browser!");
}
var wsutil = {
join: function() {
this._ws=new WebSocket("ws://localhost:8080/ws/counter/");
this._ws.onopen=this._onopen;
this._ws.onmessage=this._onmessage;
this._ws.onclose=this._onclose;
},
_onopen: function(text){
wsutil._send(text);
},
_send: function(message){
if (this._ws)
this._ws.send(message);
},
_onmessage: function(m) {
var valueLabel = document.getElementById("valuetime");
valueLabel.innerHTML = m.data; },
_onclose: function(m) {}

};


function sendmethod(){
wsutil._onopen("hello")
}
</script>
</head>
<body οnlοad="wsutil.join()">
发送hello的次数:<div id="valuetime"></div>

</br>
<input type="text" id="msg" value="" />
<input type="button" value="发送" id="send" οnclick="sendmethod()"/>
</body>
</html>

后台java代码：
public static Long i=0l;

@Override
public void onMessage(String data) {
System.out.println(data);
if ("hello".equals(data)) {
try {
i=i+1;
con.sendMessage(i.toString());
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
zz_xyz
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Tomcat下WebSocket最大连接数测试
z915412321的博客
08-20 2万+
WebSocket现在很常用，想要测试tomcat的最大连接数，今天试了一个可行的办法和配置（之前是用全公司的设备一起来测试的，真机环境的测试收到网络的影响很大，其实真实环境应用中，网络才是websocket的最大瓶颈） 废话不多说~ 1.Tomcat需要设置的地方(很多人从网上找的配置试了不可行)： 1.1修改catalina.sh或者catalina.bat文件，加上这句话（JAVA_O
html建立socket,html5的websocket怎么建立udp连接
weixin_34169503的博客
06-07 453
目前还是不支持udp。想用udp，可以使用flash.UDP目前还未正式发布。一个UDP的例子：// This example shows a simple implementation of UPnP-SSDP M-SEARCH discovery using a multicast UDPSocketvar address = '239.255.255.250',port = '1900',s...
tomcat websock html5,WebSocket 简单的聊天室实现 Tomcat
weixin_30725317的博客
06-30 139
前端代码String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>My WebSocketWelcomeSend Closevar websocket =...
Websockt断开重连
LaySwift
05-24 845
websocket重连 let ws = new Websocket(url) ws.onclose = function(){ var reVar = setInterval(function(){ // 先对重连过后的Websocket进行判断，如果重连成功则断开循环 if(ws.readyState == 1){ ...
websockt使用
Mr.h的博客
07-19 1639
WebSocket与消息推送 转自 https://www.cnblogs.com/best/archive/2016/09/12/5695570.html 目录 一、Socket简介 二、WebSocket简介与消息推送 三、WebSocket客户端 四、WebSocket服务器端 五、测试运行 六、小结与消息推送框架 6.1、开源Java消息推送框架 Pushlet 6....
前端实现一个websocket
weixin_44684357的博客
12-27 572
websocket 是h5中新增的协议，面向长连接，用于服务器和本地保持通讯，在聊天或者 大数据实时响应的时候用的到； 前端实现一个websocket： // ws://localhost:7001/show 此为通信地址 var ws = new WebSocket("ws://localhost:7001/show"); // WebSocket有以下4个方法: //连接发生错误的回调方法 websocket.onerror = function ()
Html5 WebSocket c++实例
01-16
8. **示例代码**：提供的实例代码可能包含一个简单的HTML页面，其中JavaScript部分负责创建WebSocket连接并处理消息；同时，C++服务端代码将展示如何监听连接，接收和发送数据。 9. **调试工具**：开发WebSocket...
HTML5WebSocket权威指南
05-21
在HTML5WebSocket权威指南中，你将深入了解到WebSocket的原理、API用法、实战示例、以及最佳实践。这本书将帮助你熟练掌握WebSocket，构建高性能的实时Web应用程序。无论是初学者还是经验丰富的开发者，都能从中获益...
websocket 技术文档
我叫陈小皮。
06-27 5704
websocket 是服务器推送技术的一种，最大的特点是服务器可以主动向客户端推送消息，客户端也可以主动向服务器发送消息。 特点： 建立在 TCP 协议之上，服务器端的实现比较容易。 与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。 数据格式比较轻量，性能开销小，通信高效。 可以发送文本，...
js实现webSocket客户端
热门推荐
.zz的博客
11-22 8万+
1. websocket 由于http请求只能由客户端发起，所有当服务器资源有变化时，客户端只能通过轮询的方式。非常浪费资源。 websocket的特点： 服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种建立在 TCP 协议之上，服务器端的实现比较容易 可以发送文本，也可以发送二进制数据 没有同源限制，客户端可以与任
WebSocket的前端实现
黑夜心依的博客
05-26 2840
关于WebSocket的介绍，网上有很多了，在此就不赘述了，如：菜鸟教程。 这里写一下关于多页面实现WebSocket的方式 代码示例： // 创建全局对象 const websocket = { ws: null, // 保存WebSocket对象 url: "ws://localhost:8080", // 后端什么地址、端口号，这边就写什么，平时地址中写 http或https协议的地方，改成 ws localSocket(userId) { // 参数 userId，作为后端后续发送消息的凭证
前端websockt可重连功能的插件
tangcc的博客
01-13 1452
详情参考： https://www.cnblogs.com/HendSame-JMZ/p/6383443.html 下载两个包后，直接引入html： https://github.com/tangcc8/reconnecting-websocket https://github.com/tangcc8/offline 效果： 最终的效果是：当网络断开连接后，会先重连3000次，如果
css20180525-设置body的样式和字体
zz_xyz的博客
05-27 1万+
如下： body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.428571429; color: #333333; background-color: #ffffff; } 第一条规则设置 bod...
HTML5技术简介
zz_xyz的博客
08-21 1196
1. 介绍 HTML是超文本标记语言的英文缩写，这是一种标记语言，不需要进行编译，直接由浏览器执行。HTML文件是一个文本文件，包含了一些HTML元素、标签等。目前HTML语言最新版本为4，W3C发布了最新的HTML5工作草案，HTML工作组包括AOL、Apple、Google、IBM、 Microsoft、Mozilla、Nokia、Opera等数百个开发上。 HTML5解决了HTML4...
placeholder 的使用
zz_xyz的博客
12-28 329
placeholder 的使用 placeholder="请输入用户名" html5里面的元素 在firefox里面才能正常显示 IE9中可能不显示
WebRTC-web实时通讯（转）
zz_xyz的博客
09-20 160
WebRTC ( Web Real-Time-Communication) 不需要插件便能支持音频和视频通信。 主页：http://www.webrtc.org 胖客户端，其实瘦客户端尽管有很多的优点，但是一个显而易见的问题是造成了极大的资源浪费 WebRTC比AJAX有更深远影响的一个主要理由，是IT技术潮流又重新回到了胖客户端Rich-UI的路子。WebRTC的核心就是点到点（...
html5 websocket
最新发布
09-05
以下是一个简单的使用HTML5 WebSocket的示例： ```javascript // 创建WebSocket对象 var socket = new WebSocket("ws://example.com/socket"); // 连接建立成功的回调函数 socket.onopen = function() { console....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值