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握手 好多人都用过 ...
随机推荐
- 33 个 2017 年必须了解的 iOS/swift 开源库第三方库
本文翻译自Medium,原作者为 Paweł Białecki<img src="https://pic3.zhimg.com/v2-c786777447261347b0d97 ...
- python学习过程（四）
上节我们说了怎么从一个网页中获取所有的a标签,包括a标签的文本和a标签的url,以及最后经过整理,直接从网页中获取key-value键值对,也就是标签:url这种形式. 例如 : 百度: http:/ ...
- 最短路【bzoj1726】: [Usaco2006 Nov]Roadblocks第二短路
1726: [Usaco2006 Nov]Roadblocks第二短路 Description 贝茜把家搬到了一个小农场,但她常常回到FJ的农场去拜访她的朋友.贝茜很喜欢路边的风景,不想那么快地结束她 ...
- luogu4240 毒瘤之神的考验(毒瘤乌斯反演)
link 题意:求出\(\sum_{i=1}^n\sum_{j=1}^m\varphi(ij)\),对998244353取模 多组数据,\(T\le 10^4,n,m\le 10^5\). 前置知识: ...
- 使用gifplayer操作gif的方法
使用的工具--gifplayer 基本用法: 1.安装 git clone https://github.com/rubentd/gifplayer.git 2.添加一张gif预览的图片 <im ...
- 【转】C#中HttpWebRequest的GetRequestStream执行的效率太低，甚至偶尔死掉
http://www.cnblogs.com/summer_adai/archive/2013/04/26/3045261.html
- jquery知识点结合使用
1.在页面的某个具有id的element内插入其他element,并给其增加悬浮提示. $('#id').after('<div id='box'></div>'); $('# ...
- 前端CSS css引入方式 css选择器 css选择器优先级
一. CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表 ...
- Jenkins自动化CI CD流水线之5--pipeline
一.概览 二.安装 在对jenkins进行初始化安装时,默认已经安装了jenkins的相关插件,如下图所示: 三.实操 新建任务: 编写pipeline脚本: 我们可以借助流水线语法去做. test流 ...
- Go语言基础之19--web编程基础
一.web编程基础 1.1 web工作方式 1.2 HTTP协议详解 a.http 请求包体 GET /domains/example/ HTTP/1.1 //请求行: 请求方法 请求URI HTTP ...