WebSocket简单使用(一) - 概念

背景：

前几天老大突然发现微信有个链接键盘的功能，我仔细想了下或许是使用WebSocket来实现的，又加上最近HTML5的呼声愈来愈高，觉得有必要研究下HTML5了。

HTML5作为下一代WEB标准，拥有许多引人注目的新特性，如Canvas、本地存储、多媒体编程接口、WebSocket 等等。今天我们就来看看具有“Web TCP”之称的WebSocket.

WebSocket的出现是基于Web应用的实时性需要而产生的。这种实时的Web应用大家应该不陌生，在生活中都应该用到过，比如新浪微博的评论、私信的通知，腾讯的WebQQ等。让我们来回顾下实时 Web 应用的窘境吧。

在WebSocket出现之前，一般通过两种方式来实现Web实时用：轮询机制和刘技术；其中轮询有不同的轮询，还有一种叫Comet的长轮询。

  • 轮询：这是最早的一种实现实时 Web 应用的方案。客户端以一定的时间间隔向服务端发出请求，以频繁请求的方式来保持客户端和服务器端的同步。这种同步方案的缺点是，当客户端以固定频率向服务 器发起请求的时候，服务器端的数据可能并没有更新，这样会带来很多无谓的网络传输，所以这是一种非常低效的实时方案。
  • 长轮询：是对定时轮询的改进和提高，目地是为了降低无效的网络传输。当服务器端没有数据更新的时候，连接会保持一段时间周期直到数据或状态改变或者 时间过期，通过这种机制来减少无效的客户端和服务器间的交互。当然，如果服务端的数据变更非常频繁的话，这种机制和定时轮询比较起来没有本质上的性能的提 高。
  • 流：常就是在客户端的页面使用一个隐藏的窗口向服务端发出一个长连接的请求。服务器端接到这个请求后作出回应并不断更新连接状态以保证客户端和服务 器端的连接不过期。通过这种机制可以将服务器端的信息源源不断地推向客户端。这种机制在用户体验上有一点问题，需要针对不同的浏览器设计不同的方案来改进 用户体验，同时这种机制在并发比较大的情况下，对服务器端的资源是一个极大的考验。

上述方式其实并不是真正的实时技术，只是使用了一种技巧来实现的模拟实时。在每次客户端和服务器端交互的时候都是一次 HTTP 的请求和应答的过程，而每一次的 HTTP 请求和应答都带有完整的 HTTP 头信息，这就增加了每次传输的数据量。但这些方式最痛苦的是开发人员，因为不论客户端还是服务器端的实现都很复杂，为了模拟比较真实的实时效果，开发人员 往往需要构造两个HTTP连接来模拟客户端和服务器之间的双向通讯，一个连接用来处理客户端到服务器端的数据传输，一个连接用来处理服务器端到客户端的数 据传输，这不可避免地增加了编程实现的复杂度，也增加了服务器端的负载，制约了应用系统的扩展性。

基于上述弊端，实现Web实时应用的技术出现了，WebSocket通过浏览器提供的API真正实现了具备像C/S架构下的桌面系统的实时通讯能 力。其原理是使用JavaScript调用浏览器的API发出一个WebSocket请求至服务器，经过一次握手，和服务器建立了TCP通讯，因为它本质 上是一个TCP连接，所以数据传输的稳定性强和数据传输量比较小。


WebSocket 协议

WebSocket 协议本质上是一个基于 TCP 的协议。为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个
HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息”Upgrade:
WebSocket”表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的
WebSocket
连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

下面我们来详细介绍一下 WebSocket 协议，由于这个协议目前还是处于草案阶段，版本的变化比较快，我们选择目前最新的 draft-ietf-hybi-thewebsocketprotocol-17 版本来描述 WebSocket 协议。因为这个版本目前在一些主流的浏览器上比如 Chrome,、FireFox、Opera 上都得到比较好的支持。通过描述可以看到握手协议

客户端发到服务器的内容:

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Origin: http://example.com
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13

从服务器到客户端的内容:

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
Sec-WebSocket-Protocol: chat

这些请求和通常的 HTTP 请求很相似，但是其中有些内容是和 WebSocket 协议密切相关的。我们需要简单介绍一下这些请求和应答信息，”Upgrade:WebSocket”表示这是一个特殊的 HTTP 请求，请求的目的就是要将客户端和服务器端的通讯协议从 HTTP 协议升级到 WebSocket 协议。其中客户端的Sec-WebSocket-Key和服务器端的Sec-WebSocket-Accept就是重要的握手认证信息了，这些内容将在服 务器端实现的博文中讲解。

相信通过上文的讲解你应该对WebSocket有了个初步认识了，如果有任何疑问欢迎交流。

时间： 2024-12-12 11:33:02

WebSocket简单使用(一) - 概念的相关文章

WebSocket简单介绍

Java后端WebSocket的Tomcat实现 一.WebSocket简单介绍 随着互联网的发展,传统的HTTP协议已经很难满足Web应用日益复杂的需求了.近年来,随着HTML5的诞生,WebSocket协议被提出,它实现了浏览器与服务器的全双工通信,扩展了浏览器与服务端的通信功能,使服务端也能主动向客户端发送数据. 我们知道,传统的HTTP协议是无状态的,每次请求(request)都要由客户端(如 浏览器)主动发起,服务端进行处理后返回response结果,而服务端很难主动向客户端发送数据:

websocket简单入门

今天说起及时通信的时候,突然被问到时用推的方式,还是定时接受的方式,由于之前页面都是用传统的ajax处理,可能对ajax的定时获取根深蒂固了,所以一时之间没有相同怎么会出现推的方式呢?当被提及websocket的时候突然头脑中搭上了这根线.一.WebSocket是HTML5出的东西(协议),也就是说HTTP协议没有变化,或者说没关系,但HTTP是不支持持久连接的(长连接,循环连接的不算)首先HTTP有1.1和1.0之说,也就是所谓的keep-alive,把多个HTTP请求合并为一个,但是Webs

websocket简单实例

只需要两个文件即可,一个服务端,一个前端,一下示例为模拟简单的聊天程序: 服务端: package com.test.websocket; import java.io.IOException; import java.util.concurrent.CopyOnWriteArraySet; import javax.websocket.OnClose; import javax.websocket.OnError; import javax.websocket.OnMessage; impor

Spring WebSocket简单入门测试Demo(网页及时聊天)

说明 本demo运行的环境是:ssm框架 + tomcat8 + jdk7+,由于只是demo.很简陋.能运行调式通过就行,再在此基础上进行扩展研究. 在网上看了很多列子.对于没有接触过websocket的人来说.真的是看不懂.本文列子应该算是比较简单的. Spring WebSocket API的核心接口是WebSocketHandler.我把它叫做消息处理中心. 其他的详细解说可以参考别人的博客 <servlet-mapping> <servlet-name>springmvc

webSocket 简单介绍

WebSocket :WebSocket协议支持(在受控环境中运行不受信任的代码的)客户端与(选择加入该代码的通信的)远程主机之间进行全双工通信.                       简单的说,WebSocket协议之前,双工通信是通过多个http链接来实现,这导致了效率低下. Websocket是一个持久化的协议,相对于HTTP这种非持久的协议来说. HTTP的生命周期通过Request来界定,也就是一个Request 一个Response,那么在HTTP1.0中,这次HTTP请求就结

WebSocket简单使用

很简单就不写太多介绍了,仅展示服务端代码!! Configure在Startup类的方法中添加WebSockets中间件 app.UseWebSockets(); 可以配置以下设置: KeepAliveInterval 多久发送一次“ ping”帧到客户端,以确保代理保持连接打开.默认值为两分钟. ReceiveBufferSize     用于接收数据的缓冲区的大小.高级用户可能需要根据数据大小更改此项以进行性能调整.默认值为4 KB. var webSocketOptions = new W

websocket简单样例

服务端 var server = require('ws').Server; var serv = new server({port:8080}); serv.on('connection',function(socket){ socket.send('hello client') socket.on('message', function (data) { console.log('receive:',data); socket.send('receive:'+data) }) }) 页面客户

Websocket简单例子

websocket是Html5的一个协议,也就是说距离我们2016年就几年时间,其他原理我就不说了,直接讲例子 一.准备材料:1.一个开发工具必须支持javaEE7的,原因是javaEE6或以下不支持websocket,我是使用的开发工具是myeclipse2015,这里给各位百度云盘 链接: https://pan.baidu.com/s/1eS3DrPK 密码: 4fe1,里面有破解的工具,很方便 2.tomcat8.0以上.JDK7.0以上(这个也许就是websocket是近几年的原因)

html5+go+websocket简单实例代码

这次的就直接发放代码截图吧,应该是用go语言做后台一个简易的聊天,这里没用到什么特别的知识,最朴实的来实现效果,主要目的是分享下h5怎么用websocket,go搭建websocket服务的主要部分. go代码部分: 1 // WebChat project main.go 2 package main 3 4 import ( 5 "fmt" 6 "net/http" 7 "time" 8 9 "encoding/json"