一. 前言
在开发中,我们经常会遇到这样一类需求:需要在网页上显示天气预报,股票数据或者实时排行榜单等实时变化的数据。对于此类需求,
一种
较为
原始的做法就是
让
客户端每隔一段时间主动
去
轮询服务器
。
但这种做法有一个很大的弊端:如果客户端的数量很大,每隔一段时间就发消息给服务器的话,服务器的并发压力会非常巨大。而且访问的频度也很难精确把握,过于频繁地访问服务器,则压力太大;不频繁的话,数据更新可能又不及时。
所以今天,
壹哥
将会给大家分享一个
可以让服务器主动推送消息给客户端的技术--WebSocket
!
二. WebSocket介绍
2.1 概念
以下是百度百科对websocket的定义:
WebSocket
是一种在单个
TCP
连接上进行
全双工
通信的协议。WebSocket通信协议于2011年被
IETF
定为标准RFC 6455,并由RFC7936补充规范。WebSocket API也被
W3C
定为标准。
WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。
2.2 WebSocket运行流程
-
首先,客户端发起http请求,经过3次握手后,建立起TCP连接。http请求里存放WebSocket支持的版本号等信息,如Upgrade、Connection、WebSocket-Version等;
-
然后,服务器收到客户端的握手请求后,同样采用HTTP协议回馈数据;
-
最后,客户端收到连接成功的消息后,开始借助于TCP传输信道进行全双工通信。
2.3
Tomcat对WebSocket的支持
Tomcat7.0.5开始支持WebSocoket。客户端通过WebSocket协议和服务器端握手,就会创建EndPoint实例。EndPoint实例在客户端与服务器链接过程中有效,最后在链接关闭时结束。在Endpoint接口中明确定义了与其生命周期相关的方法,规范实现者确保生命周期的各个阶段调用实例的相关方法。生命周期方法如下:
方法
|
含义描述
|
注解
|
onOpen
|
当开启一个新的会话时调用,该方法是客户端与服务器端握手成功后调用的方法
|
@OnOpen
|
onClose
|
当会话关闭时调用
|
@onClose
|
onError
|
当连接过程中异常时调用
|
@OnError
|
三.
WebSocket基本使用
3.1 浏览器和服务器建立起连接
在浏览器中使用WebSocket进行连接,代码如下:
// WebSocket HTML5提供的内置对象
var ws = new WebSocket("ws://localhost:8080/chatroom_war_exploded/wstest");
ws.onopen=function(){
alert("连接服务器成功")
在后端创建Endpoint类,代码如下:
@ServerEndpoint("/wstest")
public class WsTest {
@OnOpen
public void onOpen(Session session, EndpointConfig endpointConfig) {
System.out.println("有客户端连接了");
3.2 浏览器发送消息给服务器
浏览器通过send方法给服务器端发送消息,代码如下:
function send(){
//发送消息
var msg = document.getElementById("msg");
ws.send(msg.value);
msg.value = ""
服务器端通过onMessage接收请求消息,代码如下:
@OnMessage
public void onMessage(String message,Session session){
System.out.println("来自客户端的消息:"+message);
3.3 服务器端推送消息给浏览器
在服务器端推送消息,代码如下:
@OnMessage
public void onMessage(String message,Session session){
System.out.println("来自客户端的消息:"+message);
//返回消息给客户端
try {
// session 就是客户端和服务器自连接起来建立的会话
// 直到关闭连接直接这个会话一直是连接的,所以我们在这个过程中可以用它给客户端推送消息
session.getBasicRemote().sendText("收到你的消息了");
} catch (IOException e) {
e.printStackTrace();
在浏览器中通过onmessage接收接收消息,代码如下:
ws.onmessage=function(res){
console.log("来自服务器的消息:"+res.data)
3.4 关闭连接
服务器端关闭,代码如下:
session.close();
客户端关闭,代码如下:
ws.close();
服务器端对关闭的响应,代码如下:
@OnClose
public void onClose(Session session){
System.out.println("连接已经关闭了,");
客户端对关闭的响应,代码如下:
ws.onclose=function(){
console.log("连接已经关闭")
3.5 异常处理
服务器端异常处理,代码如下:
@OnError
public void onError(Throwable t) throws Throwable {
System.out.println("系统异常!msg:" + t);
浏览器端异常处理,代码如下:
ws.onclose=function(){
console.log("连接已经关闭")
四. 总结
壹哥认为,websocket协议就是对http协议不能主动接受服务器推送消息的一种补充。以下是壹哥给大家总结出的http协议和websocket协议之间的区别:
- WebSocket是双向通信协议,模拟Socket协议,可以双向发送或接受信息;
- HTTP是单向的;
- WebSocket是需要浏览器和服务器握手进行建立连接的;
- http是浏览器发起向服务器的连接,服务器预先并不知道这个连接。
本文主要讲解SpringBoot 如何基于WebSocket 实现主动推送消息给用户消息推送的业务逻辑为服务端开启WebSocket 服务,客户端通过建立长连接进入等待状态,服务器在合适的时候推送消息给客户端,最后客户端接受消息自行处理。话不多说,上关键代码。服务端Maven 项目在pom.xml 里引入websocket 依赖。org.springframework.bootspring-boo...
一、Web端实现即时消息推送五种方式
股票曲线实时变化,在线IM聊天等等,Web系统里总是能见到消息推送的应用。消息推送用好了能增强用户体验,实现消息推送有N种解决方案。
1.1、什么是消息推送
消息推送(Push)指运营人员通过自己的产品或第三方工具对用户当前网页或移动设备进行的主动消息推送。用户可以在网页上或移动设备锁定屏幕和通知栏看到push消息通知。以此来实现用户的多层次需求,使得用户能够自己设定所需要的信息频道,得到即时消息,简单说就是一种定制信息的实现方式。我们平时浏览邮箱时突然弹出消息
例:发送登录请求后及时获取返回值,然后根据返回值处理接下来的事件,类似http请求,不过需求是要用websocket做到这一点。
我们在websocket 介绍上能够充分认知到websocket的所有回调函数都是异步执行的,也就是说我发送send(msg)之后我要读取信息是在onmessage()里面读取,这显然不符合我们的要求。
dispatch....
平时我们都是由客户端浏览器主动发送请求到服务端,然后服务器处理请求后返回结果,服务器无法主动向客户端浏览器发送消息。但是在某些业务场景下我们需要由服务器主动发送消息到客户端浏览器,如当客户用户下订单后,服务器需要主动发消息提醒商户用户有新的订单被创建,请及时处理。在这种需求下我们就需要使用到websocket。WebSocket是一种在单个TCP连接上进行全双工通信的协议。...
WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信,即允许服务器主动发送信息给客户端。因此,在WebSocket中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输,客户端和服务器之间的数据交换变得更加简单。
Springboot整合WebSocket,实现服务端主动向客户端推送数据
1.对于WebSocket、Socket、Http三者的理解
Socket(长连接,一直连接,资源耗费大):
所谓套接字(Socket),就是对网络中不同主机上的应用进程之间进行双向通信的端点的抽象
一个套接字就是网络上进程通信的一端,提供了应用层进程利用网络协议交换数据的机制
从所处的地位来讲,套接字上联应用进程,下联网络协议栈,是应用程序通过网络协议进行通信的接口,是应用程序与网络协议根进行交互的接口
Http:
超文本传输协
通常在web前端通知客户的时候,一种方式是通过Http/Https轮询来实现,另外一种方式是通过WebSocket 这种轻量Tcp连接来实现,我们这边介绍的就是消息推送。
Http+WebSocket 原理解析
方案的实现
前端实现webSocket 的方式如下两种方式仅供参考:
第一种一种是使用sockjs。
第二种是使用h5的标准。使用Html5标准自然更方便简单,所以记录的是配合h5的使用方法。
index.html
<!DOCTYPE html>
客户端通过websocket连接到服务端
客户端发送jwt-token验证身份,确定用户是谁
服务端从rabbitmq接收消息,根据消息所属通过websocket推送到具体用户
服务端从http api接收消息,根据消息所属通过websocket推送到具体用户
WebSocket协议是基于TCP的一种网络协议。WebSocket实现了客户端与服务器全双工通信,既然是全双工,就说明服务器可以主动发送信息给客户端。