微人事第十天：WebSocket实现在线群聊

最新推荐文章于 2021-05-07 23:51:17 发布

YRZ-James

最新推荐文章于 2021-05-07 23:51:17 发布

阅读量337

点赞数

分类专栏：微人事课程

本文链接：https://blog.csdn.net/qq_41998938/article/details/104244297

版权

WebSocket的由来：
大家都知道，HTML页面在刚刚开始出现的时候是静态的，不能够进行交互，后来有了JavaScript，在一定程度上解决了这个问题，但是JavaScript刚出现的时候并不能和服务端进行交互，直到Ajax的出现。Ajax有效的解决了页面和服务端进行交互的问题，不过Ajax有一个问题，就是所有的请求都必须由客户端发起，服务端进行响应，如果服务端有最新的消息，难以即时的发送到客户端去。

为了让服务端都发送消息到客户端，一开始使用了long poll 和 ajax轮询，但是这两种方法都是被动式的。就比如客户端每隔一段时间向服务端询问是否有消息，有的话则发送。这种方式非常被动，当服务端没有消息时，那么连接的资源就被浪费掉了。而且使用long poll 和 ajax轮询每次连接都需要把自身消息传递给服务端，每次连接断开这些消息都会被删除掉。总而言之，这两种方法非常浪费资源，而且很被动。(如果想了解详情可访问：https://www.zhihu.com/question/20215561)。

而使用WebSocket可以很好的结局这个问题。比如在线群聊就需要服务端的消息发送到客户端上。

什么是WebSocket：
WebSocket为浏览器和服务器之间提供了双工异步通信功能，也就是说我们可以利用浏览器给服务器发送消息，服务器也可以给浏览器发送消息，目前主流浏览器的主流版本对WebSocket的支持都算是比较好的，但是在实际开发中使用WebSocket工作量会略大，而且增加了浏览器的兼容问题，这种时候我们更多的是使用WebSocket的一个子协议stomp，利用它来快速实现我们的功能。

接下来做一个简单的线上群聊功能：
首先创建springboot项目，引入web和websocket相关依赖：
在这里插入图片描述
在pom.xml文件中引入相关的前端依赖，因为等会要创建聊天界面及js交互。

		 <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>sockjs-client</artifactId>
            <version>1.1.2</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.4.1</version>
        </dependency>
        <dependency>
            <groupId>