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握手 好多人都用过 ...
随机推荐
- 【51nod1847】奇怪的数学题（Min_25筛+杜教筛）
题面 传送门 题解 这题有毒--不知为啥的错误调了半天-- 令\(f(i)={sgcd(i)}\),那么容易看出\(f(i)\)就是\(i\)的次大质因子,用\(i\)除以它的最小质因子即可计算 于是 ...
- python web开发之flask框架学习(2) 加载模版
上次学习了flask的helloword项目的创建,这次来学习flask项目的模版加载: 第一步:创建一个flask项目 第二步:在项目目录的templates文件夹下创建一个html文件 第三步: ...
- P1903 [国家集训队]数颜色 / 维护队列 带修改的莫队
\(\color{#0066ff}{ 题目描述 }\) 墨墨购买了一套N支彩色画笔(其中有些颜色可能相同),摆成一排,你需要回答墨墨的提问.墨墨会向你发布如下指令: 1. Q L R代表询问你从第L支 ...
- 模板【洛谷P3390】 【模板】矩阵快速幂
P3390 [模板]矩阵快速幂 题目描述 给定n*n的矩阵A,求A^k 矩阵A的大小为n×m,B的大小为n×k,设C=A×B 则\(C_{i,j}=\sum\limits_{k=1}^{n}A_{i, ...
- Linux安全加固--精简启动项
1.关闭不必要的服务 1.1.centos6.x服务操作命令 1.1.1.常用命令 查看服务开启或关闭状态: [root@localhost ~]# chkconfig --list aegis 0: ...
- Codeforces-B-Divisors of Two Integers(思维技巧)
Recently you have received two positive integer numbers xx and yy. You forgot them, but you remember ...
- CodeForces - 893C-Rumor(并查集变式)
Vova promised himself that he would never play computer games... But recently Firestorm - a well-kno ...
- Educational Codeforces Round 3 B
B. The Best Gift time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...
- stark组件之创建
stark组件之需求 仿照Django中的admin , 开发了自己的stark组件,实现类似数据库客户端的功能,对数据进行增删改查 . stark之创建 1.在项目中 创建stark应用,app01 ...
- 免费的mysql数据库
https://blog.csdn.net/kernel_/article/details/53320498