什么是WebSocket？
WebSocket是一种网络通信协议。和HTTP协议一样，都是基于TCP协议来传输数据。
为什么需要WebSocket？因为有一些功能HTTP无法满足。
HTTP协议是一种无状态的、无连接的、单项的应用层协议。基于HTTP协议的通信请求只能由客户端发起，服务端对请求做出处理。这种通信模型有一个弊端，它无法实现服务器主动向客户端发起请求。
以微信举例，张三给李四发了一条消息，这条消息来到了服务器后无法给李四的客户端推送，只能等待李四去刷新客户端来询问服务器是否有新的消息。
怎么解决这种问题呢？
1、轮询：客户端定时向服务器发送请求，服务器会马上进行处理，并关闭连接。
2、长轮询：客户端向服务器发送HTTP请求，服务器接到请求后暂不返回响应信息，这时连接会一直保持，直到有新消息才返回响应信息并关闭连接，客户端处理完响应信息后再向服务器发送新的请求。
3、长连接：在页面里嵌入一个隐蔵iframe，将这个隐蔵iframe的src属性设为对一个长连接的请求或是采用xhr请求，服务器端就能源源不断地往客户端输入数据。对于服务器的要求太高了。
4、WebSocket：在WebSocket出来之前，服务器想要给客户端主动推送消息的话，需要一直保持连接。而现在服务器已经知道的客户端的门牌号了，那么它们就不需要再保持联系了，服务器直接根据门牌号送货上门。
客户端实现
1、创建WebSocket对象
代码语言：javascript复制let ws=new WebSocket(url);参数url格式说明：ws://IP地址:端口号/资源名称
2、WebSocket事件
事件 | 事件处理程序 | 描述 |
|---|---|---|
open | websocket对象.onopen | 连接建立时触发 |
message | websocket对象.onmessage | 客户端接收服务端数据时触发 |
error | websocket对象.onerror | 通信发生错误时触发 |
close | websocket对象.onclose | 连接关闭时触发 |
3、WebSocket方法
WebSocket对象的相关方法：
方法 | 描述 |
|---|---|
send() | 使用连接发送数据 |
客户端具体编程
如下为Vue示例代码：
① 创建websocket对象
let ws=new WebSocket('ws://IP地址/接口');② 给ws绑定事件
代码较多，不在这里显示了，公众号回复【WebSocket】拿源码。
③ 向服务器发送消息
代码语言：javascript复制// 判断当前与服务器的连接是否正常
if(this.socket.readyState===1){
this.socket.send(msg);
}服务端实现
服务端实现有两种方式：
1、编程式：
继承类javax.websocket.Endpoint并实现其方法。
2、注解式：
定义一个Component，并添加ServerEndpoint相关注解。
服务端具体编程
① POM依赖
代码语言：javascript复制<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>② 创建HttpSession配置
代码语言：javascript复制public class GetHttpSessionConfig extends ServerEndpointConfig.Configurator {
@Override
public void modifyHandshake(ServerEndpointConfig sec, HandshakeRequest request, HandshakeResponse response) {
// 获取HttpSession对象
HttpSession httpSession = (HttpSession) request.getHttpSession();
// 将httpSession对象存储到配置对象中
sec.getUserProperties().put(HttpSession.class.getName(),httpSession);
}
}③ 创建配置类
代码语言：javascript复制@Configuration
public class WebSocketConfig {
/**
* 这个Bean的作用是自动注册使用了@ServerEndpoint注解的Bean
* @author 二饭
* @email 1786705138@qq.com
*/
@Bean
public ServerEndpointExporter serverEndpointExporter(){
return new ServerEndpointExporter();
}
}④ 创建接口
代码较多，不在这里显示了
