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握手 好多人都用过 ...
随机推荐
- 使用Spring IOC容器引用外部属性文件
一.引用外部属性文件 1.编写属性文件,以键值对形式存储,并放置在类路径(src)下 jdbc.jdbcUrl=jdbc:mysql://localhost:3306/BOOKSTORE?rewrit ...
- Spark大数据处理 之 从WordCount看Spark大数据处理的核心机制（2）
在上一篇文章中,我们讲了Spark大数据处理的可扩展性和负载均衡,今天要讲的是更为重点的容错处理,这涉及到Spark的应用场景和RDD的设计来源. Spark的应用场景 Spark主要针对两种场景: ...
- 《图解HTTP》阅读笔记---第一章网络基础
第一章.网络基础TCP/IP:----------传输控制协议Transmission Control Protocol / 网络协议Internet Protocol是一种用于Internet(因特 ...
- J.U.C-其他组件
J.U.C-其他组件 FutureTask 介绍Callable时我们知道它可以有返回值,返回值通过Future进行封装.FutrueTask实现了RunnableFuture接口,该接口继承了R ...
- kuangbin专题七 HDU1540 Tunnel Warfare （前缀后缀线段树）
During the War of Resistance Against Japan, tunnel warfare was carried out extensively in the vast a ...
- spring boot中 启用aspectj
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring- ...
- java web 简单的权限管理
spring ,springMvc ,mybatis 简单权限管理 其实只需要3张表..admin_group ,function,group 表
- hdu3038判断区间谎言（带权并查集）
题目传送门 题目描述:给你n,m,n代表从1到n这么大的数组,m组v,u,val,代表v到u这个区间的总和是val,然后让你判断m组关系中有几组是错误的. 思路:带权并查集,这道题其实算是让我知道什么 ...
- Codeforces Round #482 (Div. 2) C 、 Kuro and Walking Route（dfs）979C
题目链接:http://codeforces.com/contest/979/problem/C 大致题意 给出n个点,有n-1个边将他们链接.给出x,y,当某一路径中出现x....y时,此路不通.路 ...
- 杭电ACM hdu 1398 Square Coins
Problem Description People in Silverland use square coins. Not only they have square shapes but also ...