1.WebSocket介绍与原理 介绍：WebSocket是HTML5一种新的协议。它实现了浏览器与服务器全双工通信。一开始的握手需要借助HTTP请求完成。 原理：WebSocket同HTTP一样也是应用层的协议，但是它是一种双向通信协议，是建立在TCP之上的。
连接/握手过程
浏览器、服务器建立TCP连接，三次握手。这是通信的基础，传输控制层，若失败后续都不执行。TCP连接成功后，浏览器通过HTTP协议向服务器传送WebSocket支持的版本号等信息。（开始前的HTTP握手）。服务器收到客户端的握手请求后，同样采用HTTP协议回馈数据。当收到了连接成功的消息后，通过TCP通道进行传输通信。2.WebSocket与HTTP的关系 相同点
1.都是一样基于TCP的，都是可靠性传输协议。2.都是应用层协议。不同点
1.WebSocket是双向通信协议，模拟Socket协议，可以双向发送或接受信息，HTTP是单向的。2.WebSocket是需要握手进行建立连接的。联系：WebSocket在建立握手时，数据是通过HTTP传输的。但是建立之后，在真正传输时候是不需要HTTP协议的。 3.WebSocket与Socket Socket是应用层与TCP/IP协议族通信的中间软件抽象层，它是一组接口。在设计模式中，Socket其实就是一个门面模式，它把复杂的TCP/IP协议族隐藏在Socket接口后面，对用户来说，一组简单的接口就是全部，让Socket去组织数据，以符合指定的协议。当两台主机通信时，必须通过Socket连接，Socket则利用TCP/IP协议建立TCP连接。TCP连接则更依靠于底层的IP协议，IP协议的连接则依赖于链路层等更低层次。而websocket则是一个典型的应用层协议。 4.websocket实现 1.引入依赖
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency>2.编写客户端代码
<script> var webSocket = null; if('WebSocket' in window){ webSocket = new WebSocket('ws://127.0.0.1:8080/sell/websocket') }else{ alert('该浏览器不支持websocket通信'); } webSocket.onopen = function () { console.log('建立连接'); } webSocket.onclose = function () { console.log('关闭连接'); } webSocket.onmessage = function (event) { console.log('接收到新的消息:'+event.data); //弹出消息并播放音乐 $("#myModal").modal('show'); document.getElementById('notic').play(); } webSocket.onerror = function () { alert('websocket通信异常'); } window.onbeforeunload = function () { webSocket.close(); } </script>3.服务端进行websocket配置
/** * websocket配置 * */ @Component public class WebSocketConfig { @Bean public ServerEndpointExporter createServerEndpointExporter(){ return new ServerEndpointExporter(); } }4.服务端编写websocket
@Component @ServerEndpoint("/websocket") @Slf4j public class WebSocket { //websocket的sessio private Session session; //websocket容器，存放websocket private static CopyOnWriteArraySet<WebSocket> copyOnWriteArraySet = new CopyOnWriteArraySet<>(); @OnOpen public void onOpen(Session session){ this.session = session; //建立连接将websocket存放到容器中 copyOnWriteArraySet.add(this); log.info("建立新的连接，当前连接数为{}",copyOnWriteArraySet.size()); } @OnClose public void onClose(){ copyOnWriteArraySet.remove(this); log.info("关闭连接，当前连接数为{}",copyOnWriteArraySet.size()); } @OnMessage public void onMessage(String message){ log.info("接收到新的消息:{}",message); } public void sendMessage(String message){ for (WebSocket webSocket : copyOnWriteArraySet){ try { webSocket.session.getBasicRemote().sendText(message); }catch (Exception e){ e.printStackTrace(); } } } }5.发送消息
@Autowired private WebSocket webSocket; //发送websocket消息 webSocket.sendMessage("======发送的消息=====");