WebSocket Demo
HTML 代码：
<body>
<h1>WebScoket示例</h1>
<br /><br />
<input type="text" id="message" name="message" value="WebSocket 示例" />
<input type="button" value="发送" onclick="openSession();" />
<input type="button" id="closeSession_button" value="关闭会话" disabled="disabled" onclick="closeSession();" />
<hr />
<div id="message_div"></div>
</body>
JavaScript 代码：
var webSocket = null; // WebSocket 对象 /**
* 创建 WebSocket 对象，并建立与服务器端的连接，即打开 WebSocket 会话
*/
var openSession = function(){
if(null == webSocket) {
webSocket = new WebSocket('ws://localhost/testProject/websocketDemo'); webSocket.onopen = function(event) {
console.log('建立与服务端的连接，即打开会话。');
window.document.getElementById('closeSession_button').disabled = ''; var message = window.document.getElementById('message').value;
webSocket.send(message);
} /**
* 与服务端的连接出现错误
*/
webSocket.onerror = function(event) {
console.log('连接出错啦！' + event.reason);
}
} else {
var message = window.document.getElementById('message').value;
webSocket.send(message);
} /**
* 监听消息
*/
webSocket.onmessage = function(event){
console.log('接收服务端推送的消息，消息内容为：' + event.data);
window.document.getElementById('message_div').innerHTML += event.data + '<br />';
}
} /**
* 断开与服务端的连接，即关闭 WebSocket 会话
*/
var closeSession = function() {
webSocket.close(); // 关闭 webSocket 连接
window.document.getElementById('closeSession_button').disabled = 'disabled';
window.document.getElementById('message_div').innerHTML = ''; webSocket.onclose = function(event) {
console.log('与服务端的连接已断开！' + event.reason);
} webSocket = null;
}
WebSocket Demo的更多相关文章
- 一个注解方式webSocket demo
前段时间在研究websocket.其中遇到了一些bug.这里跟大家分享这过程. 首先介绍一下websocket WebSocket是HTML5的一种新协议,实现了浏览器和服务器的双全工通信,能更好的节 ...
- vue+websocket demo 实例
vue+websocket demo: <!-- vue + websocket连接demo --> <template> <div class="" ...
- java WebSocket Demo
1.IDEA创建Module,结构如图(Tomcat8.0) 2.引入jar包:javax.websocket-api.jar 3.新建WebSocketTest类 import javax.webs ...
- gateway 整合 websocket demo
背景: 这个websocket 因为使用的地方不多,并没有独立出一个项目,是集成在已有的服务中. 1: gateway 配置 - id: service-test uri: lb:ws://se ...
- php WebSocket 简单实现demo
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据. 在 ...
- Win7搭建nginx+php+mysql开发环境以及websocket聊天实例测试
Win7搭建nginx+php+mysql开发环境以及websocket聊天实例测试一.下载相关安装包 1.下载nginx最新版本(nginx1.3.13版之后才支持websocket协议) 下载地址 ...
- NodeJS 各websocket框架性能分析
For a current project at WhoScored, I needed to learn JavaScript, Node.js and WebSocket channel, aft ...
- 使用Jetty搭建Java Websocket Server，实现图像传输
https://my.oschina.net/yushulx/blog/298140 How to Implement a Java WebSocket Server for Image Transm ...
- 通讯框架 t-io 学习——websocket 部分源码解析
前言 前端时间看了看t-io的websocket部分源码,于是抽时间看了看websocket的握手和他的通讯机制.本篇只是简单记录一下websocket握手部分. WebSocket握手 好多人都用过 ...
随机推荐
- Python学习过程（三）
今天我们来学习怎么从网络上抓取我们想得到的信息,要从网页上得到我们的信息,首先是从网络上通过url获取页面 的文本,先从最简单的开始,比如获取百度首页的html. 对应代码如下: 获取网页html源码 ...
- P2115 [USACO14MAR]破坏Sabotage
题意:给你一个正整数序列,让你删去一段区间内的数[l,r] $1<l\le r <n$ 使得剩余的数平均值最小$n\le 10^5$ 1.不难想到暴力,用前缀和优化$O(n^2)$ #in ...
- P1114 “非常男女”计划
题意:给你一个01串,求满足0和1总数相等的最大字串 $n\ \le\ 10^5$ 1.$O(n^3)$枚举起点终点,统计判断是否成立 2.$O(n^2)$先$O(n)$时间计算01个数的前缀和, ...
- deque时间复杂度和vector，list比较
deque supports const time insert and erase operations at the beginning or the end, insert or erase i ...
- 使用Tensorflow object detection API——训练模型（Window10系统）
[数据标注处理] 1.先将下载好的图片训练数据放在models-master/research/images文件夹下,并分别为训练数据和测试数据创建train.test两个文件夹.文件夹目录如下 2. ...
- poi进行excle操作
一 excle导出: 所需要jar包 <dependency> <groupId>org.apache.poi</groupId> <artifactId&g ...
- IDEA 中 使用 git(Git)
GitLab GitLab 是一个用于仓库管理系统的开源项目,使用Git作为代码管理工具,并在此基础上搭建起来的web服务.安装方法是参考GitLab在GitHub上的Wiki页面. Git Git( ...
- C语言中类型限定符
通常用类型和存储类别来描述一个变量. C90还增加了两个属性:恒常性(constancy).易变性(volatility): 分别用关键字const和volatile来声明. 这两个关键字创建的类型是 ...
- 三嫖客之awk
awk '{h[$1]++}END{for(pol in h)print pol,h[pol]}' access.log |sort -rnk2|head awk -F: -vOFS=":& ...
- IDEA中Java代码存入DB中为乱码
有一种可能是编译后出现的乱码,可以在Setting的Java compiler中加如下 -encoding UTF-8