Spring-websocket 实现网页聊天解决方案

前言

最近朋友问了我一个websocket的相关问题 .勾起了我对websocket的再次研究.这篇文章作为自己的一个研究成果拿出来和大家分享一下.如果纰漏之处还望不吝赐教.

另外我看到很多朋友在博客或者分享平台公布出的源码 .大多感觉配置繁琐 . 另外还有部分代码根本无法运行 .通过这篇文章 .我将尽量抛弃繁琐的配置 , 利用好Spring 提供的各种注解来完成框架的搭建.并保证文章末尾的代码是可运行的.

抱歉各位 , 博文可能写不完了 , 但是我把代码开源给大家交流学习 , 共勉 ! 

发布到了码云 , 避免优快云耍 流氓 收积分 

https://gitee.com/jikers/websocket_web_chat.git

阅读本文章你需要准备的

1.项目构建工具Maven的使用(因为整个工程使用它来构建)

2.对于Spring生态内部的各种组件(Spring MVC 等)的一般性了解

3.对于JavaScript , HTML , CSS的使用有一定的基础且能够使用一些类库

4.能够使用开发工具IntelliJ IDEA

5.对于websocket协议的基本认知

 

阅读本文章你将得到哪些分享

1.何为websocket协议

2.使用Spring websocket 快速构建起支持websocket协议的工程

3.将通过一些演示代码带领你了解如何通过websocket这一协议编写网页即时通讯应用

 

即将开始 !!

诚然 : 我在开头部分提到了在阅读本篇文章的准备内容中提到过"对于websocket协议的基本认知"这部分,但我依然还是要解释和备忘一些概念性问题

何为websocket?

WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。

WebSocket通信协议于2011年被IETF定为标准RFC 6455，并被RFC7936所补充规范。

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

了解计算机网络协议的人，应该都知道：HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起，服务端对请求做出应答处理。

这种通信模型有一个弊端：HTTP 协议无法实现服务器主动向客户端发起消息。

这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。大多数 Web 应用程序将通过频繁的异步JavaScript和XML（AJAX）请求实现长轮询。轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）。

因此，工程师们一直在思考，有没有更好的方法。WebSocket 就是这样发明的。WebSocket 连接允许客户端和服务器之间进行全双工通信，以便任一方都可以通过建立的连接将数据推送到另一端。WebSocket 只需要建立一次连接，就可以一直保持连接状态。这相比于轮询方式的不停建立连接显然效率要大大提高。

因此简单说 : websocket从根本上解决了客户端浏览器和服务器在双工通信的根本问题.使得通信效率提高.资源占用率减低.

 

开始搭建工程

File ==> New ==>Project

然后在弹出的New Project 弹出框内选中Maven

勾选Create from archetype 我们将使用模板(原型)来构建Maven工程

找到maven-archetype-webapp并选中

 

然后我们点击Next按钮

输入你喜好的GroupId , ArtifactId 然后使用 Next按钮

 

 后面步骤可能因为我们Idea开发版本的不同所不同,但尽管Next .(无非是一些工程位置等个性化设置 ) 直至Finish按钮的出现 !

接下来你的Idea将自动拉取项目的Jar依赖,插件依赖.进行速度由你的网络决定 .

很快 , 你得到了一个Maven构建的空工程 .

 

显然 . 并没有存放java代码的位置 .我们依次在main文件夹下面新建

java  ,  resources目录 . 在windows资源管理器中看起来像这样 :

 

在Idea中看起来像这样 :

由于我们使用Maven帮助我们完成项目构建.至此Idea还不认识我们的工程是何种工程 . 需要对工程进行配置

点击 : File ==> Project Structure

选择 : Facets ,点击左上角绿色的加号

 

 在弹出的选项中选择Web . 然后Choose Module 选中我们的工程名 ===> 点击OK按钮完成这一步骤

接下来界面会跳转到左侧Modules , Idea将要求你建立一个模块来支持该类型的工程

点选上图位置你将会看到 :

 选择main下面的java文件夹 . 选择上面工具栏Mark as 中的Sources按钮 .此时意味着Idea将视该文件夹为源码文件夹 .

然后选择main下面的resources文件夹 , 同样我们选择Mark as 中的Resources 按钮将其标记位资源文件夹 .(里面的内容将被编译到classPath下)

然后我们调整language level 为 8 或者以上来保证我们能够使用到更多Jdk新特性

完成后看起来像这样 :

 

然后我们依次点按右下角 Apply === > OK .

随后关闭这个窗口

 

接下来我们按照之前创建maven工程时约定的GroupId 来创建java 的包

我这里是依次创建 \

kim.ioio.web

kim.ioio.web.config (用于存放本工程中产生的配置POJO)

kim.ioio.web.interceptors (用于存放web 拦截器相关)

kim.ioio.web.constants (用于存放一些常量类)

 

使用DispacherServlet加载spring-mvc.xml

在web.xml中增加如下代码来启动Spring 容器和加载上下文

<servlet>
        <servlet-name>springMVC</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:spring-mvc.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>springMVC</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

    <listener>
        <listener-class>
            org.springframework.web.context.ContextLoaderListener
        </listener-class>
    </listener>

抱歉各位 , 博文可能写不完了 , 但是我把代码开源给大家交流学习 , 共勉 ! 

发布到了码云 , 避免优快云耍 流氓 收积分 

https://gitee.com/jikers/websocket_web_chat.git