您当前的位置:首页 > 电脑百科 > 程序开发 > 架构

WebSocket分析及实践

时间:2019-08-15 16:26:00  来源:  作者:
作者:黄 晓安, 何 亮, 和 许 宁
来源:https://www.ibm.com/developerworks/cn/web/1112_huangxa_websocket/

WebSocket产生背景:实时Web应用的窘境

应用的信息交互过程通常是客户端通过浏览器发出一个请求,服务器端接收和审核完请求后进行处理并返回结果给客户端,然后客户端浏览器将信息呈现出来,这种机制对于信息变化不是特别频繁的应用尚能相安无事,但是对于那些实时要求比较高的应用来说,比如说实时报表统计、在线游戏、在线证券、设备监控、新闻在线播报、RSS 订阅推送等等,当客户端浏览器准备呈现这些信息的时候,这些信息在服务器端可能已经过时了。所以保持客户端和服务器端的信息同步是实时 Web 应用的关键要素,对 Web 开发人员来说也是一个难题。

在 WebSocket 出来之前,开发人员想实现这些实时的 Web 应用,不得不采用一些折衷的方案,其中最常用的就是轮询 (Polling) 和 Comet 技术,而 Comet 技术实际上是轮询技术的改进,又可细分为两种实现方式,一种是长轮询机制,一种称为流技术。下面简单介绍一下这几种技术:

轮询

这是最早的一种实现实时 Web 应用的方案。客户端以一定的时间间隔向服务端发出请求,以频繁请求的方式来保持客户端和服务器端的同步。这种同步方案的最大问题是:当客户端以固定频率向服务器发起请求的时候,服务器端的数据可能并没有更新,这样会带来很多无谓的网络传输,所以这是一种非常低效的实时方案。

长轮询:

长轮询是对定时轮询的改进和提高,目地是为了降低无效的网络传输。当服务器端没有数据更新的时候,连接会保持一段时间周期直到数据或状态改变或者时间过期,通过这种机制来减少无效的客户端和服务器间的交互。当然,如果服务端的数据变更非常频繁的话,这种机制和定时轮询比较起来没有本质上的性能的提高。

流:

流技术方案通常就是在客户端的页面使用一个隐藏的窗口向服务端发出一个长连接的请求。服务器端接到这个请求后作出回应并不断更新连接状态以保证客户端和服务器端的连接不过期。通过这种机制可以将服务器端的信息源源不断地推向客户端。这种机制在用户体验上有一点问题,需要针对不同的浏览器设计不同的方案来改进用户体验,同时这种机制在并发比较大的情况下,对服务器端的资源是一个极大的考验。

综合这几种方案,您会发现这些目前我们所使用的所谓的实时技术并不是真正的实时技术,它们只是在用 Ajax 方式来模拟实时的效果,在每次客户端和服务器端交互的时候都是一次 HTTP 的请求和应答的过程,而每一次的 HTTP 请求和应答都带有完整的 HTTP 头信息,这就增加了每次传输的数据量,而且这些方案中客户端和服务器端的编程实现都比较复杂,在实际的应用中,为了模拟比较真实的实时效果,开发人员往往需要构造两个 HTTP 连接来模拟客户端和服务器之间的双向通讯,一个连接用来处理客户端到服务器端的数据传输,一个连接用来处理服务器端到客户端的数据传输,这不可避免地增加了编程实现的复杂度,也增加了服务器端的负载,制约了应用系统的扩展性。

##什么是WebSocket?

WebSocket是html5的新特性之一,其设计出来的目的就是要取代轮询和 Comet 技术,使客户端浏览器具备像 C/S 架构下桌面系统的实时通讯能力。

那WebSocket究竟是什么?首先我们需要清楚,WebSocket本质上就是一种计算机网络应用层的协议(HTTP就是一种网络应用层协议),用来弥补HTTP协议在持久通信能力上的不足。我们知道HTTP协议本身是无状态协议,每一个新的HTTP请求,只能通过客户端主动发起,通过建立连接-->传输数据-->断开连接的方式来传输数据,传送完连接就断开了,也就是此次HTTP请求已经完全结束了(虽然HTTP1.1增加了keep-alive请求头可以通过一条通道请求多次,但本质上还是一样的)。并且服务器是不能主动给客户端发送数据的(因为之前的请求得到响应后连接就断开了,之后服务器根本不知道谁请求过),客户端也不会知道之前请求的任何信息,所以HTTP协议本身是没有持久通信能力的,正因为这样,也就出现了上述实时Web应用的窘境。

WebSocket协议实现了浏览器与服务器的全双工通信(指在通信的任意时刻,线路上存在A到B和B到A的双向信号传输,简单说就如同打电话一样,浏览器和服务器任何一方随时都能够主动给对方说话)。并且在HTML5标准中增加了有关WebSocket协议的相关API,所以只要实现了HTML5标准的客户端,就可以与支持WebSocket协议的服务器进行全双工的持久通信了。

与HTTP协议一样,WebSocket协议也需要通过已建立的TCP连接来传输数据。具体实现上是通过HTTP协议建立通道,然后在此基础上用真正的WebSocket协议进行通信,所以WebSocket协议和Http协议是有一定的交叉关系的。Websocket是应用层第七层上的一个应用层协议,它必须依赖 HTTP 协议进行一次握手 ,握手成功后,数据就直接从TCP通道传输,与HTTP无关了。

一篇文章读懂:WebSocket分析及实践

 

 

为什么需要WebSocket?

浏览器通过JAVAScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。因为 WebSocket 连接本质上就是一个 TCP 连接,所以在数据传输的稳定性和数据传输量的大小方面,和轮询以及 Comet 技术比较,具有很大的性能优势。Websocket.org 网站对传统的轮询方式和 WebSocket 调用方式作了一个详细的测试和比较,将一个简单的 Web 应用分别用轮询方式和 WebSocket 方式来实现,在这里引用一下他们的测试结果图:

一篇文章读懂:WebSocket分析及实践

 

 

通过这张图可以清楚的看出,在流量和负载增大的情况下,WebSocket 方案相比传统的 Ajax 轮询方案有极大的性能优势。这也是为什么我们认为 WebSocket 是未来实时 Web 应用的首选方案的原因。

WebSocket使用场景

什么时候使用WebSocket,你需要考虑如下两个因素

你的应用是否提供多个用户之间的相互交流?

你的应用是展示服务器端经常变动的数据吗?

如果上述两个问题你的回答是肯定的,那么请考虑使用WebSocket。如果你还不确定,那有一些经典场景,你可以参考并激发一下自己的灵感。

实时统计(图表)

你需要你的统计数据(或者图表)实时更新,类似于淘宝双11大屏那样的效果

系统即时提醒

实时地图位置

弹幕

社交订阅

社交类的应用的一个裨益之处就是能够即时的知道你的朋友正在做什么。虽然听起来有点可怕,但是我们都喜欢这样做。你不会想要在数分钟之后才知道微信朋友圈朋友发布的更新动态。你是在线的,所以你的订阅的更新应该是实时的。

股票基金报价

金融界瞬息万变——几乎是每毫秒都在变化。我们人类的大脑不能持续以那样的速度处理那么多的数据,所以我们写了一些算法来帮我们处理这些事情。虽然你不一定是在处理高频的交易,但是,过时的信息也只能导致损失。当你有一个显示盘来跟踪你感兴趣的公司时,你肯定想要随时知道他们的价值,而不是10秒前的数据。使用WebSocket可以流式更新这些数据变化而不需要等待。

体育实况更新

如果你在你的网站应用中包含了体育新闻,WebSocket能够助力你的用户获得实时的更新。

基于位置的应用

越来越多的开发者借用移动设备的GPS功能来实现他们基于位置的应用。如果你收集到了用户的位置数据(比如记录运动轨迹)。如果你想实时的更新网络数据仪表盘(可以说是一个监视运动员的教练),HTTP协议显得有些笨拙。借用WebSocket TCP链接可以让数据飞起来。

在线教育

上学花费越来越贵了,但互联网变得更快和更便宜。在线教育是一种不错的学习方式,尤其是你可以和老师以及其他同学一起交流。此时,用WebSocket来实现是个不错的选择,可以多媒体聊天、文字聊天以及其它优势如与别人合作一起在公共数字黑板上画画等。

如何使用WebSocket?

使用WebSocket需要客户端和服务器端,客户端通常就是浏览器(基于浏览器进行的JavaScript调用),服务器端通常就是支持WebSocket的中间件。

  • 客户端浏览器支持(以下是主流浏览器对HTML5 WebSocket的支持情况)

 

一篇文章读懂:WebSocket分析及实践

 

 

支持 WebSocket 的服务器

服务器端的实现不受平台和开发语言的限制,只需要遵从 WebSocket 规范即可,目前已经出现了一些比较成熟的 WebSocket 服务器端实现,比如Kaazing WebSocket Gateway(一个 Java 实现的 WebSocket Server)、mod_pywebsocket(一个 Python 实现的 WebSocket Server)、Netty(一个 Java 实现的网络框架其中包括了对 WebSocket 的支持)、Node.js(一个 Server 端的 JavaScript 框架提供了对 WebSocket 的支持),当然也可以使用Tomcat(需要为Tomcat7.0.47以上,且Tomcat7.x和Tomcat8.x的使用方式还不一样)。

WebSocket JavaScript API接口

针对 Web 开发人员的 WebSocket JavaScript 客户端接口是非常简单的,以下是 WebSocket JavaScript 接口的定义:

一篇文章读懂:WebSocket分析及实践

 

 

其中 URL 属性代表 WebSocket 服务器的网络地址,协议通常是”ws”,send 方法就是发送数据到服务器端,close 方法就是关闭连接。除了这些方法,还有一些很重要的事件:onopen,onmessage,onerror 以及 onclose。

##WebSocket实战—系统即时提醒

在上一节中我们说到使用WebSocket需要客户端和服务器端,客户端通常就是浏览器(基于浏览器进行的JavaScript调用),服务器端通常就是支持WebSocket的中间件。本节中我们将进行一个WebSocket实战—系统即时提醒(使用Chrome + Tomcat7.0.70,在此基础上进行前后端代码开发),后端模拟业务变化,向前端实时推送提醒消息,前端页面进行消息提醒的实时展示。

  • WebSocket客户端代码(基于Jsp)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/jquery-1.7.2.min.js"></script>
<script 
type="text/javascript" src="js/noty/packaged/jquery.noty.packaged.js"></script>
<title>系统即时提醒</title>
<script type="text/javascript">
var n;	// 消息提示插件对象
$(document).ready(function () {
// jQuery noty消息提示插件 
n = noty({
 text: "", // 默认提示信息为空 
 type: "alert", // alert样式 
 layout: 'center', // 提示框居于页面中间 
 theme: 'defaultTheme' // 使用默认样式 
 });
});
//*********************WebSocket 调用**********************//
// 定义WebSocket客户端对象websocket
var websocket = null;
 //判断当前浏览器是否支持WebSocket
 if ('WebSocket' in window) {
 // WebSocket应用名,websocket服务名 
 websocket = new WebSocket("ws://localhost:8080/WebSocket/websocket");
 }
 else {
 alert('当前浏览器 Not support websocket')
 }
 //连接发生错误的回调方法
 websocket.onerror = function () {
 setMessageAlert("WebSocket连接发生错误");
 };
 //连接成功建立的回调方法
 websocket.onopen = function () {
 setMessageAlert("WebSocket连接成功");
 }
 //接收到消息的回调方法
 websocket.onmessage = function (event) {
 setMessageAlert(event.data);
 }
 //连接关闭的回调方法
 websocket.onclose = function () {
 setMessageAlert("WebSocket连接关闭");
 }
 //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
 window.onbeforeunload = function () {
 closeWebSocket();
 }
 // 使用noty插件即时展示提醒信息 
 function setMessageAlert(data) {
 n.setText(data);
 }
 //关闭WebSocket连接
 function closeWebSocket() {
 websocket.close();
 }
</script>
</head>
<body>
</body>
</html>

 

  • WebSocket服务器端代码(基于Java)
package com.itheima.ssm.controller;
import java.io.IOException;import java.util.concurrent.CopyOnWriteArraySet;
import javax.websocket.*;import javax.websocket.server.ServerEndpoint;
/**
 * @ServerEndpoint 注解是一个类层次的注解,它的功能主要是将目前的类定义成一个websocket服务器端,
 * 注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端
 */@ServerEndpoint("/websocket")public class WebSocketTest {
 //静态变量,用来记录当前在线连接数。应该把它设计成线程安全的。
 private static int onlineCount = 0;
 //concurrent包的线程安全Set,用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话,可以使用Map来存放,其中Key可以为用户标识
 public static CopyOnWriteArraySet<WebSocketTest> webSocketSet = new CopyOnWriteArraySet<WebSocketTest>();
 //与某个客户端的连接会话,需要通过它来给客户端发送数据
 private Session session;
 /**
 * 连接建立成功调用的方法
 * @param session 可选的参数。session为与某个客户端的连接会话,需要通过它来给客户端发送数据
 */
 @OnOpen
 public void onOpen(Session session){
 this.session = session;
 webSocketSet.add(this); //加入set中
 addOnlineCount(); //在线客户端数加1
 System.out.println("有新连接加入!当前在线客户端数为" + getOnlineCount());
 }
 /**
 * 连接关闭调用的方法
 */
 @OnClose
 public void onClose(){
 webSocketSet.remove(this); //从set中删除
 subOnlineCount(); //在线客户端数减1
 System.out.println("有一连接关闭!当前在线客户端数为" + getOnlineCount());
 } 
 /**
 * 收到客户端消息后调用的方法
 * @param message 客户端发送过来的消息
 * @param session 可选的参数
 */
 @OnMessage
 public void onMessage(String message, Session session) {
 System.out.println("来自客户端的消息:" + message);
 }
 /**
 * 发生错误时调用
 * @param session
 * @param error
 */
 @OnError
 public void onError(Session session, Throwable error){
 System.out.println("发生错误");
 error.printStackTrace();
 }
 /**
 * 这个方法与上面几个方法不一样。没有用注解,是根据自己需要添加的方法。
 * @param message
 * @throws IOException
 */
 public void sendMessage(String message) throws IOException{
 this.session.getBasicRemote().sendText(message);
 }
 public static synchronized int getOnlineCount() {
 return onlineCount;
 }
 public static synchronized void addOnlineCount() {
 WebSocketTest.onlineCount++;
 }
 public static synchronized void subOnlineCount() {
 WebSocketTest.onlineCount--;
 }
}

 

  • 服务器端测试代码,模拟服务器主动向前端发送消息
/**
 * 触发后模拟服务器主动向前端发送系统即时提醒
 */@RequestMApping("sendMsg")public void sendMsg() {
 SimpleDateFormat sf = new SimpleDateFormat("yyyy年MM月dd日 HH:mm:ss");
 // 模拟向已连接的WebSocket客户端发送系统提醒
 for(WebSocketTest item: WebSocketTest.webSocketSet){
 try {
 item.sendMessage("系统提醒:当前时间," + sf.format(new Date()) + ",请尽快完成任务!");
 } catch (IOException e) {
 e.printStackTrace();
 continue;
 }
 }
}
  • 服务器启动后,通过http://localhost:8080/WebSocket/alert.action跳转到了前端Jsp页面,页面创建了WebSocket连接,然后通过调用http://localhost:8080/WebSocket/sendMsg.action模拟服务器主动向前端发送系统提醒信息,前端进行即时的展示,效果如下:

 

一篇文章读懂:WebSocket分析及实践

 

 

注意

通过上面的讲述,WebSocket 的优势已经很明显了,但是作为一个正在演变中的 Web 规范,我们也要看到目前用 Websocket 构建应用程序的一些风险。首先,WebSocket 规范目前还处于草案阶段,也就是它的规范和 API 还是有变动的可能,另外的一个风险就是微软的 IE 作为占市场份额最大的浏览器,和其他的主流浏览器相比,对 HTML5 的支持是比较差的,这是我们在构建企业级的 Web 应用的时候必须要考虑的一个问题。



Tags:WebSocket   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
最近工作中需要开发前端操作远程虚拟机的功能,简称 WebShell。基于当前的技术栈为 react+django,调研了一会发现大部分的后端实现都是 django+channels 来实现 websocket 服务。...【详细内容】
2021-09-13  Tags: WebSocket  点击:(52)  评论:(0)  加入收藏
前言:作为一个刚踏入职场的实习生,我很幸运参加了某个政府项目,并且在项目中负责一个核心模块功能的开发,而不是从头到尾对数据库的crud。虽然我一直心里抱怨我的工作范围根本...【详细内容】
2021-05-24  Tags: WebSocket  点击:(231)  评论:(0)  加入收藏
1)通知功能:保持一个长连接,当服务端游新的消息,能够实时的推送到使用方。像知乎的点赞通知、评论等,都可以使用WebSocket通信。某些使用H5的客户端,为了简化开发,也会使用WebSocke...【详细内容】
2021-03-03  Tags: WebSocket  点击:(157)  评论:(0)  加入收藏
背景:一般与服务端交互频繁的需求,可以使用轮询机制来实现。然而一些业务场景,比如游戏大厅、直播、即时聊天等,这些需求都可以或者说更适合使用长连接来实现,一方面可以减少轮询...【详细内容】
2020-12-17  Tags: WebSocket  点击:(156)  评论:(0)  加入收藏
1. 前言Websocket是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送...【详细内容】
2020-11-11  Tags: WebSocket  点击:(100)  评论:(0)  加入收藏
前段时间我有这样一个需求,想和一个异地的人一起看电影,先后在网上找了一些方案,不过那几个案都有一些缺点...【详细内容】
2020-10-21  Tags: WebSocket  点击:(92)  评论:(0)  加入收藏
1. 前言Websocket是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数...【详细内容】
2020-09-18  Tags: WebSocket  点击:(97)  评论:(0)  加入收藏
前言服务器和客户端保持长连接通信,实现方式比较多。有很多成熟的框架可以完成,底层无非都是对Socket流的封装和使用。一、SOCKET原理Socket大致是指在端到端的一个连接中,这...【详细内容】
2020-08-06  Tags: WebSocket  点击:(75)  评论:(0)  加入收藏
1. 心跳重连原由 心跳和重连的目的用一句话概括就是客户端和服务端保证彼此还活着,避免丢包发生。websocket连接断开有以下两种情况:前端断开在使用websocket过程中,可能会出现...【详细内容】
2020-07-29  Tags: WebSocket  点击:(308)  评论:(0)  加入收藏
用这些简化了 WebSockets 的开源支持工具来控制你的流媒体。 来源:https://linux.cn/article-12347-1.html 作者:Kevin Sonney 译者:Xingyu.Wang(本文字数:4340,阅读时长大约:6 分...【详细内容】
2020-06-25  Tags: WebSocket  点击:(96)  评论:(0)  加入收藏
▌简易百科推荐
为了构建高并发、高可用的系统架构,压测、容量预估必不可少,在发现系统瓶颈后,需要有针对性地扩容、优化。结合楼主的经验和知识,本文做一个简单的总结,欢迎探讨。1、QPS保障目标...【详细内容】
2021-12-27  大数据架构师    Tags:架构   点击:(5)  评论:(0)  加入收藏
前言 单片机开发中,我们往往首先接触裸机系统,然后到RTOS,那么它们的软件架构是什么?这是我们开发人员必须认真考虑的问题。在实际项目中,首先选择软件架构是非常重要的,接下来我...【详细内容】
2021-12-23  正点原子原子哥    Tags:架构   点击:(7)  评论:(0)  加入收藏
现有数据架构难以支撑现代化应用的实现。 随着云计算产业的快速崛起,带动着各行各业开始自己的基于云的业务创新和信息架构现代化,云计算的可靠性、灵活性、按需计费的高性价...【详细内容】
2021-12-22    CSDN  Tags:数据架构   点击:(10)  评论:(0)  加入收藏
▶ 企业级项目结构封装释义 如果你刚毕业,作为Java新手程序员进入一家企业,拿到代码之后,你有什么感觉呢?如果你没有听过多模块、分布式这类的概念,那么多半会傻眼。为什么一个项...【详细内容】
2021-12-20  蜗牛学苑    Tags:微服务   点击:(9)  评论:(0)  加入收藏
我是一名程序员关注我们吧,我们会多多分享技术和资源。进来的朋友,可以多了解下青锋的产品,已开源多个产品的架构版本。Thymeleaf版(开源)1、采用技术: springboot、layui、Thymel...【详细内容】
2021-12-14  青锋爱编程    Tags:后台架构   点击:(21)  评论:(0)  加入收藏
在了解连接池之前,我们需要对长、短链接建立初步认识。我们都知道,网络通信大部分都是基于TCP/IP协议,数据传输之前,双方通过“三次握手”建立连接,当数据传输完成之后,又通过“四次挥手”释放连接,以下是“三次握手”与“四...【详细内容】
2021-12-14  架构即人生    Tags:连接池   点击:(17)  评论:(0)  加入收藏
随着移动互联网技术的快速发展,在新业务、新领域、新场景的驱动下,基于传统大型机的服务部署方式,不仅难以适应快速增长的业务需求,而且持续耗费高昂的成本,从而使得各大生产厂商...【详细内容】
2021-12-08  架构驿站    Tags:分布式系统   点击:(23)  评论:(0)  加入收藏
本系列为 Netty 学习笔记,本篇介绍总结Java NIO 网络编程。Netty 作为一个异步的、事件驱动的网络应用程序框架,也是基于NIO的客户、服务器端的编程框架。其对 Java NIO 底层...【详细内容】
2021-12-07  大数据架构师    Tags:Netty   点击:(17)  评论:(0)  加入收藏
前面谈过很多关于数字化转型,云原生,微服务方面的文章。虽然自己一直做大集团的SOA集成平台咨询规划和建设项目,但是当前传统企业数字化转型,国产化和自主可控,云原生,微服务是不...【详细内容】
2021-12-06  人月聊IT    Tags:架构   点击:(23)  评论:(0)  加入收藏
微服务看似是完美的解决方案。从理论上来说,微服务提高了开发速度,而且还可以单独扩展应用的某个部分。但实际上,微服务带有一定的隐形成本。我认为,没有亲自动手构建微服务的经历,就无法真正了解其复杂性。...【详细内容】
2021-11-26  GreekDataGuy  CSDN  Tags:单体应用   点击:(35)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条