WebSockets通信
WebSockets通信
1. websocket是什么?
WebSocket是一种网络通信协议。
2. 为什么需要websocket?
我们有http协议,为什么还需要websocket协议呢?
因为http协议有一个缺陷,通信只能是客户端发起请求的,服务器端返回查询结果。比如说 我想知道一个实时新闻,那么每次新闻更新后,我都要刷新页面
,发起客户端请求,服务器端返回结果。不能做到服务器端推送消息给客户端,当然我们可以使用轮询,看看服务器有么有新的消息,比如 "聊天室" 这样的,但是轮询效率非常低的,因此websocket就这样产生了。
websocket最大的优点是:服务器可以主动向客户端推送消息,客户端也可以主动向服务器端发送消息。
使用websockets可以在服务器与客户端之间建立一个非http的双向链接。这个链接是实时的,也是永久的(除非被关闭),当服务器想向客户端发送
数据时,可以立即将数据推送到客户端的浏览器中,无需重新建立链接,只要客户端有一个被打开的socket(套接字)并且与服务器建立链接,服务器就可以
把数据推送到这个socket上。
3. 如何使用websocket?
WebSocket接收一个url参数,然后调用WebSocket对象的构造器来建立与服务器之间的通信链接。
如下代码初始化:
var websocket = new WebSocket('wss://echo.websocket.org');
注意:URL字符串必须以 "ws" 或 "wss"(加密通信)开头。
如上代码,通信链接建立好之后,就可以进行客户端与服务器端的双向通信了。可以使用websocket对象的send方法对服务器发送数据,但是只能
发送文本数据(但是我们可以使用JSON对象把任何js对象转换成文本数据后再进行发送)。
3-1 使用send方法的代码如下:
websocket.send("data");
3-2 接收服务器传过来的数据
通过onmessage事件来接收服务器传过来的数据,如下代码:
websocket.onmessage = function(event) {
var data = event.data;
}
3-3 监听socket的打开事件
通过获取onopen事件来监听socket的打开事件。如下代码:
websocket.onopen = function(event) {
// 开始通信时的处理
}
3-4 监听socket的关闭事件
通过获取onclose事件来监听socket的关闭事件。如下代码:
websocket.onclose = function(event) {
// 通信结束时的处理
}
通过close方法来关闭socket, 如下代码:
websocket.close();
3-5 webSocket.readyState
可以通过读取readyState的属性值来获取WebSocket对象的状态,readyState属性存在以下几种属性值。
CONNECTING(数字值为0), 表示正在连接。
OPEN(数字值为1),表示已建立连接。
CLOSING(数字值为2),表示正在关闭连接。
CLOSED(数字值为3),表示已关闭链接。
4. 发送消息demo
请看效果演示
如下代码:
var websocket = new WebSocket('wss://echo.websocket.org');
websocket.onopen = function(e) {
console.log('Connection open ...');
websocket.send("Hello WebSocket!");
}
websocket.onmessage = function(e) {
console.log('Received Message: ' + e.data);
websocket.close();
}
websocket.onclose = function(e) {
console.log('Connection closed.');
}
4-1 下面再看一个demo,客户端使用websocket技术与服务器端进行连接并且发送信息的demo,代码如下:
var websocket;
function connect() {
var msg = document.getElementById('message');
try {
var readyState = new Array("正在连接", "已建立连接", "正在关闭连接", "已关闭连接");
var url = "wss://echo.websocket.org";
websocket = new WebSocket(url);
msg.innerHTML +="<p>Socket状态为:"+readyState[websocket.readyState]+"</p>";
websocket.onopen = function() {
msg.innerHTML += "<p>Socket状态为"+readyState[websocket.readyState]+"</p>"
}
websocket.onmessage = function(msg) {
msg.innerHTML += "<p>接收信息:"+msg.data+"</p>";
}
websocket.onclose = function() {
msg.innerHTML += "<p>Socket状态为:"+readyState[websocket.readyState]+"</p>"
}
} catch(e) {
msg.innerHTML += "<p>发生异常了</p>";
}
}
function send() {
var text = document.getElementById('text').value;
var msg = document.getElementById('message');
if (text == "") {
msg.innerHTML += "<p>请输入一些文字</p>";
return;
}
try {
websocket.send(text);
msg.innerHTML += "<p>发送数据:"+text+"</p>";
} catch(e) {
msg.innerHTML += "<p>发送数据异常了</p>";
}
document.getElementById('text').value = '';
}
function disconnect() {
websocket.close();
}
4-2 发送对象
使用websocket,不仅可以发送文本数据,而且可以使用JSON对象来发送JS中的对象,使用JSON对象的关键是使用它的两个方法,
JSON.parse方法与JSON.stringify方法,JSON.stringify方法把javascript对象转换成文本数据,JSON.parse方法将文本数据转换为Javascript对象。如下代码演示:
<!DOCTYPE html>
<html>
<head>
<title>websocket</title>
<style> </style>
</head>
<body>
<script>
var websocket = new WebSocket('wss://echo.websocket.org');
websocket.onopen = function(e) {
console.log('Connection open ...');
websocket.send(
JSON.stringify({
'msg': 'payload'
})
);
}
websocket.onmessage = function(e) {
console.log(JSON.parse(e.data));
websocket.close();
}
websocket.onclose = function(e) {
console.log('Connection closed.');
}
</script>
</body>
</html>
4-3 发送与接收原始二进制数据
在HTML5中,除了可以使用websocket发送文本数据以及对象之外,还可以使用websocket来发送ArrayBuffer对象与Bolb对象。如下代码:
<!DOCTYPE html>
<html>
<head>
<title>websocket</title>
<style> </style>
</head>
<body>
<script>
var websocket = new WebSocket('wss://echo.websocket.org');
websocket.onopen = function(e) {
console.log('Connection open ...');
// 发送二进制对象
var buffer = new ArrayBuffer(128);
websocket.send(buffer); var intview = new Uint32Array(buffer);
websocket.send(intview); var blob = new Blob([buffer]);
websocket.send(blob);
}
websocket.onmessage = function(e) {
console.log(e.data);
websocket.close();
}
websocket.onclose = function(e) {
console.log('Connection closed.');
}
</script>
</body>
</html>
比如上传图片,发送图片二进制数据如下:
<!DOCTYPE html>
<html>
<head>
<title>websocket</title>
<style> </style>
</head>
<body>
<input type="file" value="选择图片" id="file" accept="image/*"/>
<button onclick="upload()">上传图片</button>
<script>
var websocket = new WebSocket('wss://echo.websocket.org');
function upload() {
var file = document.getElementById('file').files[0];
console.log(file)
websocket.send(file);
}
websocket.onmessage = function(e) {
console.log(e.data);
}
</script>
</body>
</html>
WebSockets通信的更多相关文章
- Nginx担当WebSockets代理
Nginx担当WebSockets代理 英文原文:http://nginx.com/blog/websocket-nginx/ 作者:chszs,转载需注明. 博客主页:http://blog.csd ...
- Apache Tomcat8必备知识(完整的支持WebSockets 1.0)
一.Apache Tomcat 8介绍 Apache Tomcat 8RC1版于前几日发布.它 经过了2年的开发,引入了很多新特征,由于目前还只是Alpha版,故不推荐在产品中使用.但是我们应该了解它 ...
- 使用Nginx做WebSockets代理教程
WebSocket 协议提供了一种创建支持客户端和服务端实时双向通信Web应用程序的方法.作为HTML5规范的一部分,WebSockets简化了开发Web实时通信程 序的难度.目前主流的浏览器都支持W ...
- C# BS消息推送 SignalR介绍(一)
1. 前言 本文是根据网上前人的总结得出的. 环境: SignalR2.x,VS2015,Win10 介绍 1)SignalR能用来持久客户端与服务端的连接,让我们便于开发一些实时的应用,例如聊天室在 ...
- 使用SignalR实现消息提醒
Asp.net SignalR是微软为实现实时通信的一个类库.一般情况下,SignalR会使用JavaScript的长轮询(long polling)的方式来实现客户端和服务器通信,随着Html5中W ...
- [SignalR]SignalR与WCF双工模式结合实现服务端数据直推浏览器端
原文:[SignalR]SignalR与WCF双工模式结合实现服务端数据直推浏览器端 之前开发基于WinForm监控的软件,服务端基于Wcf实现,里面涉及双工模式,在客户端里面,采用心跳包机制保持与服 ...
- [Asp.net 开发系列之SignalR篇]专题一:Asp.net SignalR快速入门
一.前言 之前半年时间感觉自己有点浮躁,导致停顿了半年多的时间没有更新博客,今天重新开始记录博文,希望自己可以找回初心,继续沉淀.由于最近做的项目中用到SignalR技术,所以打算总结下Asp.net ...
- MVC中使用SignaIR入门教程
一.前言:每次写总要说一点最近的感想 进入工作快半年了,昨天是最郁闷的一天,我怀疑我是不是得了"星期一综合征",每个星期一很没有状态.全身都有点酸痛,这个可能一个星期只有周末才打一 ...
- SignalR 实现web浏览器客户端与服务端的推送功能
SignalR 是一个集成的客户端与服务器库,基于浏览器的客户端和基于 ASP.NET 的服务器组件可以借助它来进行双向多步对话. 换句话说,该对话可不受限制地进行单个无状态请求/响应数据交换:它将继 ...
随机推荐
- 如何在UWP中统一处理不同设备间的页面回退逻辑
已经有一段时间没有写博客来记录自己的学习点滴了.现在回想起来确实有些惭愧,期间经历了一些事情,到目前为止算是平息了,是时候该收收心来充实自己了. 在本篇缪文中,楼主打算给UWP开发的初学者讲述一个在开 ...
- vue点击元素变色兄弟元素不变色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS外观属性
CSS外观属性 color 文本颜色 line-height 行间距 text-aline水平对齐方式 text-indent 首行缩进 letter-spacing字间距 word-spacing ...
- jQuer插件满屏气泡飘落动画效果
飘落动画效果插件引用: <script src="https://cdn.bootcss.com/JQuery-Snowfall/1.7.4/snowfall.jquery.min.j ...
- 关于input的焦点事件
关于input的焦点事件 $(".scanf_integral").focus(function(){//获取焦点//获取焦点后触发的事件 }) $(".scanf_in ...
- Android项目实战(三十二):圆角对话框Dialog
前言: 项目中多处用到对话框,用系统对话框太难看,就自己写一个自定义对话框. 对话框包括:1.圆角 2.app图标 , 提示文本,关闭对话框的"确定"按钮 难点:1.对话框边框圆角 ...
- Element隐藏组件:scrollbar
scrollbar是用来替代浏览器原生滚动条的组件,element的文档中并没有对scrollbar的描述. 使用方法:以<el-scrollbar/>包裹要滚动的元素,并设置固定高度.在 ...
- Java并发编程(十三)线程间协作的两种方式:wait、notify、notifyAll和Condition
在现实中,需要线程之间的协作.比如说最经典的生产者-消费者模型:当队列满时,生产者需要等待队列有空间才能继续往里面放入商品,而在等待的期间内,生产者必须释放对临界资源(即队列)的占用权.因为生产者如果 ...
- git本地仓库关联多个remote,怎么用本地一个分支向不同remote不同分支推送代码
我想这个问题,是大家关注的问题,这个问题,我非常关注. 背景:在公司开发项目,我们一般都要把项目推送到公司领导创建的一个远程仓库里边去,但是我们同时也有自己的小仓库,这样的话,如何方便的将我们的代码, ...
- (网页)jQuery UI 实例 - 日期选择器(Datepicker)
默认功能 日期选择器(Datepicker)绑定到一个标准的表单 input 字段上.把焦点移到 input 上(点击或者使用 tab 键),在一个小的覆盖层上打开一个交互日历.选择一个日期,点击页面 ...