WebSocket实现在线聊天

本文介绍了WebSocket协议的基本知识,以及如何使用Spring Boot搭建WebSocket后台,实现实时在线聊天功能。WebSocket是一种在浏览器和服务器间建立长期连接的协议,提供双向通信,解决了Http实时性不足的问题。文中详细讲解了WebSocket的建立过程、特点以及浏览器支持情况,并提供了Spring Boot的WebSocket实现步骤。

这一篇文章前面部分我们会先介绍WebSocket协议的基本知识,在最后我们会用Spring Boot来集成WebSocket实现一个简单的在线聊天功能,单纯想看实现部分的话可以直接跳过前面介绍的部分。

前言

通常情况下,浏览器和服务器之间的消息通讯一般会使用Http协议,但是如果我们想服务器返回数据,我们必须先由浏览器发送请求给服务器,服务器才能响应这个请求。一般情况下Http协议基本能够满足我们需求,但是如果我们想打造一个网站在线聊天平台,这个时候我们发送一条消息,其他用户的浏览器该如何接受这条消息呢?

在一开始我们可以使用轮询的方式让浏览器发送请求到服务器,查询是否有消息返回,这种方式能基本满足需求。但是在网站的后期会有一些问题衍生出来,比如实时性不够高,而且频繁的请求会给服务器带来极大的压力。

对于实时性的问题我们可以利用Http的Comet方式保持长链接,但是Comet本质上也是轮询,但是在没有消息的情况下,服务器先拖一段时间,等到有消息了再回复。这个机制暂时地解决了实时性问题,但是它带来了新的问题:以多线程模式运行的服务器会让大部分线程大部分时间都处于挂起状态,极大地浪费服务器资源。另外,一个HTTP连接在长时间没有数据传输的情况下,链路上的任何一个网关都可能关闭这个连接,而网关是我们不可控的,这就要求Comet连接必须定期发一些ping数据表示连接“正常工作”。

基于上面的请求,HTML5推出了WebSocket标准,让浏览器和服务器之间可以建立无限制的全双工通信,任何一方都可以主动发消息给对方。

WebSocket介绍

WebSocket是HTML5新增的协议,它的目的是在浏览器和服务器之间建立一个不受限的双向通信的通道,比如说,服务器可以在任意时刻发送消息给浏览器。但是WebSocket并不是全新的协议,而是利用了HTTP协议来建立连接。

我们先看下面的格式

General:
Request URL: ws://127.0.0.1:8080/websocket/%E6%AF%8F%E5%A4%A9%E5%AD%A6Java
Request Method: GET
Status Code: 101 

Response Header:
Connection: upgrade
Date: Sat, 30 Mar 2019 02:53:11 GMT
Sec-WebSocket-Accept: 4yMemfpbrCzWxZ1vpNqCI2IR+YI=
Sec-WebSocket-Extensions: permessage-deflate;client_max_window_bits=15
Upgrade: websocket

Resquest Header:
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
Sec-WebSocket-Key: lD0B2FWxinrTPcNDMsO3hQ==
Sec-WebSocket-Version: 13

下面是普通的Http请求

General:
Request URL: http://127.0.0.1:8080/index
Request Method: GET
Status Code: 200 
Remote Address: 127.0.0.1:8080
Referrer Policy: no-referrer-when-downgrade

Request Header:

首先WebSocket的GET请求而是以ws://开头的地址;

其次WebSocket的Status Code是101;

且WebSocket的请求头Upgrade: websocket和Connection:
Upgrade表示这个连接将要被转换为WebSocket连接;

在Resquest Header中:Sec-WebSocket-Key是用于标识这个连接,并非用于加密数据,Sec-WebSocket-Version指定了WebSocket的协议版本。

101表示本次连接的HTTP协议即将被更改,更改后的协议就是Upgrade: websocket指定的WebSocket协议。

Http为什么不能实现全双工通信呢?实际上HTTP协议是建立在TCP协议之上的,TCP协议本身就实现了全双工通信,但是HTTP协议的请求-应答机制限制了全双工通信。

而WebSocket连接建立以后,通讯放弃了Http协议,进而可以进行互相进行通讯

WebSocket特点

  • 建立在 TCP 协议之上,服务器端的实现比较容易。
  • 与 HTTP 协议有着良好的兼容性。默认端口也是80和443,并且握手阶段采用 HTTP 协议,因此握手时不容易屏蔽,能通过各种 HTTP 代理服务器。
  • 数据格式比较轻量,性能开销小,通信高效。
  • 可以发送文本,也可以发送二进制数据。
  • 没有同源限制,客户端可以与任意服务器通信。
  • 协议标识符是ws(如果加密,则为wss),服务器网址就是 URL。

安全的WebSocket连接机制和HTTPS类似。首先,浏览器用wss://xxx创建WebSocket连接时,会先通过HTTPS创建安全的连接,然后,该HTTPS连接升级为WebSocket连接,底层通信走的仍然是安全的SSL/TLS协议。

浏览器对WebSocket支持情况

支持WebSocket的主流浏览器如下:

  • Chrome
  • Firefox
  • IE >= 10
  • Sarafi >= 6
  • Android >= 4.4
  • iOS >= 8

对于低版本不支持WebSocket浏览器,可以参考以下的解决方案

  • 使用轮询或长连接的方式实现伪websocket的通信
  • 使用flash或其他方法实现一个websocket客户端
  • ActiveX HTMLFile (IE)

搭建后台

这里我们使用Spring Boot来集成WebSocket

在这里插入图片描述

目录

在这里插入图片描述

当应用加载完之后

第一步是要创立websocket endpoint

在Spring Boot中我们通过注入ServerEndpointExporter,来达到创建

package com.example.websocket;


import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;


@Configuration
public class WebSocketConfig {
   
   
   //这个bean会自动注册使用了@ServerEndpoint注解声明的Websocket endpoint
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
   
   
        return new ServerEndpointExporter();
    }

}

第二步是写websocket的具体实现类

实现类中@ServerEndpoint(value = “/websocket/{user}”)
对应前端的请求方式为:
new WebSocket(“ws://127.0.0.1:8080/websocket/2”);

而如果通过 new WebSocket(“ws://127.0.0.1:18080/testWebsocket?id=23&name=Lebron”)达到传递参数的效果
我们就需要使用WebSocketHandler来实现websocket

package com.example.websocket;


import org.springframework.stereotype.Component;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.List;
import java.util
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值