WebScoket技术讲解

1.写在前面        

        本篇将为您讲解WebScoket技术，我将从WebScoket的诞生背景，本质，特点，实现的角度来为大家一一讲解。由于本人也是一枚编程小白，因此该篇是经过大量的资料融合加上本人的对WebSocket的实际应用，尽可能从初学者的角度将WebSocket技术讲的通俗易懂。

---

2.诞生背景

        在WebSocket诞生之前，网站为了实现推送技术(服务端向客户端发送消息)大多采用的方法就是轮询。什么是轮询? 轮询就是客户端每隔一段时间向服务端发送一次HTTP 请求，然后服务器将处理好的数据返回给客户端。大家可以发现，轮询的本质依然是客户端在调用服务端。

补充：轮询分为短轮询和长轮询，大家可自行查阅二者区别

3.本质

        WebScoket的本质是一种协议，他与HTTP协议性质是相同的，只不过他们的特点不同，应用场景也不同。为什么说他是一种协议，大家看以一下下面的两张图便可以明白。

4.特点

        经过上面的WebScoket背景与本质部分，我们可以看出WebScoket的其中一个特点是，可以实现服务端主动给客户端下发数据的业务功能，这也是我认为WebScoket的最大特点。

其次WebScoket还有以下特点：

1.较少的控制开销：在连接创建后，服务器和客户端之间交换数据时，用于协议控制的数据包头部相对较小；

2.更强的实时性：由于协议是全双工的，所以服务器可以随时主动给客户端下发数据。相对于 HTTP 请求需要等待客户端发起请求服务端才能响应，延迟明显更少；

3.保持连接状态：与 HTTP 不同的是，WebSocket 需要先创建连接，这就使得其成为一种有状态的协议，之后通信时可以省略部分状态信息；

4.更好的二进制支持：WebSocket 定义了二进制帧，相对 HTTP，可以更轻松地处理二进制内容；

5.可以支持扩展：WebSocket 定义了扩展，用户可以扩展协议、实现部分自定义的子协议。

5.实现（Vue + SpringBoot）

        1.vue部分

<template>
<button @click="webclick">给后台发送消息</button>
</template>
​
<script>
export default {
    name: "web2",
    data() {
        return {
            ws: null
        }
    },
    created() {
        //连接WebSocket服务端，然后初始化监听事件
        this.ws = new WebSocket("ws://localhost:8087/websocket/test");
        this.initWebSocket();
​
    },
    destroyed() {
      // 离开路由之后断开websocket连接
      this.setOncloseMessage() 
    },
    methods: {
      //连接websocket,用于接收后台实时消息推送
      initWebSocket() {
          // 连接错误
          this.ws.onerror = this.setErrorMessage
          // 连接成功
          this.ws.onopen = this.setOnopenMessage
          // 收到消息的回调
          this.ws.onmessage = this.setOnmessageMessage
          // 连接关闭的回调
          this.ws.onclose = this.setOncloseMessage
          // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口
          window.onbeforeunload = this.onbeforeunload
      },
      setErrorMessage() {
          console.log('WebSocket连接发生错误-状态码：' + this.ws.readyState)
          console.log(this.websocket)
      },
      setOnopenMessage() {
          console.log('WebSocket连接成功-状态码：' + this.ws.readyState)
          console.log(this.websocket)
      },
      setOnmessageMessage(event) {
          // 根据服务器推送的消息做自己的业务处理
          console.log(this.websocket)
          console.log('服务端返回：' + event)
          const result = JSON.parse(event.data)
          console.log(result)
      },
      setOncloseMessage() {
        console.log('WebSocket连接关闭    状态码：' + this.websocket.readyState)
      }
    }
}
</script>

        2.SpringBoot部分

依赖

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>

配置类：该类是为了配置ServerEndpointExporter去查找带有@ServerEndPoint注解的服务类。

/**
 * WebScoket配置类
 */
@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
	
}

服务类

@Component
//此注解相当于设置访问URL
@ServerEndpoint("/websocket/{userName}")
public class WebSocket {

	private final static Logger log = LoggerFactory.getLogger("websocketLog");

	private Session session;

	private static CopyOnWriteArraySet<WebSocket> webSockets = new CopyOnWriteArraySet<>();

	private static Map<String, List<Session>> sessionPool = new HashMap<String, List<Session>>();

	@OnOpen
	public void onOpen(Session session, @PathParam(value = "userName") String userName) {
		this.session = session;
		webSockets.add(this);

		if(sessionPool.get(userName) == null) {
			List<Session> userList = new ArrayList<Session>();
			userList.add(session);
			sessionPool.put(userName, userList);
		} else {
			sessionPool.get(userName).add(session);
		}
		System.out.println(userName + "【websocket消息】有新的连接，总数为:" + webSockets.size());
	}

	@OnClose
	public void onClose(Session session, @PathParam(value = "userName") String userName) {
		webSockets.remove(this);
		if(sessionPool.get(userName).size() <= 1) {
			sessionPool.remove(userName);
		} else {
			sessionPool.get(userName).remove(session);
		}
		System.out.println( "【websocket消息】连接断开，总数为:" + webSockets.size() );
	}

	@OnMessage
	public void onMessage(String message) {
		System.out.println("【websocket消息】收到客户端消息:" + message);
	}

	// 此为广播消息
	public void sendAllMessage(String message) {
		for (WebSocket webSocket : webSockets) {
			try {
				webSocket.session.getAsyncRemote().sendText(message);
			} catch (Exception e) {
				e.printStackTrace();
			}
		}
	}

	// 此为单点消息
	public void sendOneMessage(String userName, String message) {
		List<Session> sessionList = sessionPool.get(userName);
		if(sessionList != null) {
			sessionList.forEach(item -> {
				try {
					if (item != null) {
						item.getAsyncRemote().sendText(message);
					}
				} catch (Exception e) {
					e.printStackTrace();
				}
			});
		}
	}
}

---

        其实，WebSocket的实现就是固定的格式，只是会有业务代码的差异，大家真正做过一遍后就很容易理解了。

---

        6.写在最后

        该篇文章是在作者本人对WebScoket理解的基础上进行整理，如有问题欢迎大家指出，万分感谢。

=============stay hungry stay foolish=============