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握手 好多人都用过 ...
随机推荐
- loj #2254. 「SNOI2017」一个简单的询问
#2254. 「SNOI2017」一个简单的询问 题目描述 给你一个长度为 NNN 的序列 aia_iai,1≤i≤N1\leq i\leq N1≤i≤N,和 qqq 组询问,每组询问读入 l1 ...
- 使用Spring IOC容器引用外部属性文件
一.引用外部属性文件 1.编写属性文件,以键值对形式存储,并放置在类路径(src)下 jdbc.jdbcUrl=jdbc:mysql://localhost:3306/BOOKSTORE?rewrit ...
- 数据结构13: 括号匹配算法及C语言实现
在编写代码的时候,经常会用到两种括号:圆括号 “()” 和大括号 “{}” .不管使用哪种括号,程序编译没有问题的其中一个重要因素就是所使用的括号是否能够匹配上. 在编写程序时,括号可以嵌套,即: “ ...
- kuangbin专题十二 HDU1260 Tickets （dp）
Tickets Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Sub ...
- 【Cracking the Code Interview(5th edition)】一、数组与字符串(C++)
1.1 实现一个算法,确定一个字符串的所有字符是否全都不同.不允许使用额外的数据结构. 解答:这里假定字符集为ASCII码,可以与面试官沟通确认字符串使用的字符集.由于字符集是有限的,建立一个数组模拟 ...
- SQL全文搜索引擎 Sphinx
Sphinx是一个基于SQL的全文检索引擎,可以结合MySQL,PostgreSQL做全文搜索, 它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索. Sphinx特别 ...
- python 基础及if while for语句
#####变量######一.命名规则 1.正常命名 可以由字母,下划线和数字组成,不能以数字开头,不能和关键字重明 2.驼峰命名法 1)大驼峰:每一个单词的首字母都大写 Fi ...
- vue（6）生态
来自:https://www.jianshu.com/p/22a99426b524?utm_campaign=maleskine&utm_content=note&utm_medium ...
- sf01_什么是数据结构
数据结构解决什么问题 如何在计算机中存储数据和信息,采用什么样的方法和技巧加工处理这些数据,都是数据结构需要努力解决的问题. 解决问题的步骤 使用计算机解决问题的步骤:分析具体问题得到数学模型,设计解 ...
- mysql 模拟一个自增序列
文章出处:https://sdu0rj.axshare.com/%E4%BA%8C%E7%BA%A7%E5%AE%A2%E6%88%B7%E7%AE%A1%E7%90%86.html mysql没有像 ...