本篇主要讲解如何使用Spring websocket 和STOMP搭建一个简单的聊天功能项目,里面使用到的技术,如websocket和STOMP等会简单介绍,不会太深,如果对相关介绍不是很了解的,请自行查阅相关知识。

本篇的项目主要是一个学习Spring websocket和STOMP的项目,基于Spring4.0之上。因为Spring4.0之上才支持Websocket。例子比较的简单,但是总体实现了

  1. 浏览器 和服务器可以正常建立websocket服务
  2. 浏览器可以像服务器订阅并发送消息
  3. 浏览器可以接收到服务器推送过来的消息,即浏览器订阅的消息

一.简单介绍Websocket和STOMP

1.websocket介绍

websocket协议是html5的一种新的协议,提供了通过套接字实现全双工通信的功能,【全双工:意味着服务器可以发送消息给浏览器,浏览器也可以发送消息给服务器】并能够实现web浏览器和服务器之间的异步通信。

它和http通信机制对比如下图:

  • http每次发送请求都需要和服务器建立一次连接, 是一种无状态的协议。
  • websocket只要第一个建立成功,浏览器就可以服务器进行通信,是一种有状态的协议。
  • websocket协议的请求报文和响应报文和http也是有区别的,这里不做介绍!

2.STOMP介绍

什么是 STOMP呢?
http是在TCP套接字之上添加了请求-响应模型!
STOMP是在WebSocket之上提供了一个基于帧的线路格式层,用于定义消息的语义。
STOMP帧由命令、一个或多个头信息以及负载所组成!举例发送数据的一个STOMP帧:

SEND
destination:/app/marco
content-length:20 {\"message\":\"hello\"}
  • 这里STOMP的命令是SEND,后面接发送的目标地址,消息内容长度,然后是一个空行,最后是发送内容,这个里面是一个JSON消息。
  • 这里需要注意的是destination,目标地址,消息会发送到这个目的地,这个目的地有服务端组件来进行处理。
  • Spring使用STOMP需要进行配置,并且Spring为STOMP消息提供了基于SpringMVC的编程模型!

二.搭建项目【项目的源码springwebscoket demo

下面进入实战演练:

1、添加依赖

<!-- 添加Spring依赖 -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-core</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context-support</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-aop</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-aspects</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-tx</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-jdbc</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>${spring.version}</version>
</dependency>
<!--spring单元测试依赖 -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-test</artifactId>
<version>${spring.version}</version>
<scope>test</scope>
</dependency> <!-- spring webmvc相关jar -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>${spring.version}</version>
</dependency> <!--Spring websocket start-->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-websocket</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-messaging</artifactId>
<version>${spring.version}</version>
</dependency>
<!--Spring websocket end--> <!-- For SockJS -->
<!-- http://jira.codehaus.org/browse/JACKSON-884 -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>${jackson.version}</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>${jackson.version}</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-annotations</artifactId>
<version>${jackson.version}</version>
</dependency>

2、添加配置文件

1.web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app>
<display-name>spring-webscoket</display-name>
<!-- 读取spring配置文件 --> <context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath*:application*.xml</param-value>
</context-param> <listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener> <!-- Spring字符集过滤器 -->
<filter>
<filter-name>SpringEncodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
<init-param>
<param-name>forceEncoding</param-name>
<param-value>true</param-value>
</init-param>
<async-supported>true</async-supported>
</filter>
<filter-mapping>
<filter-name>SpringEncodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping> <!-- springMVC核心配置 -->
<servlet>
<servlet-name>dispatcherServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<!--spingMVC的配置路径 -->
<param-value>classpath:spring-mvc.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
<async-supported>true</async-supported>
</servlet>
<!-- 拦截设置 -->
<servlet-mapping>
<servlet-name>dispatcherServlet</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping> <welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>

需要注意:< async-supported>true< /async-supported>,在filter和Servlet中都需要添加!

2.spring-mvc.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:p="http://www.springframework.org/schema/p"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.2.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.2.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd"> <!-- 扫描controller(controller层注入) -->
<context:component-scan base-package="com.dufy"/> <mvc:annotation-driven /> <!-- 当在web.xml 中 DispatcherServlet使用 <url-pattern>/</url-pattern> 映射时,能映射静态资源 -->
<mvc:default-servlet-handler />
<!-- 静态资源映射 -->
<mvc:resources mapping="/static/**" location="/WEB-INF/static/"/> <!-- 对模型视图添加前后缀 -->
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/jsp/" />
<property name="suffix" value=".jsp" />
</bean> </beans>
3.applicationContext.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:tx="http://www.springframework.org/schema/tx"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd
http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.0.xsd
http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.0.xsd
"> <!-- Spring WebSocketSession管理容器 -->
<bean id="webSocketSessionManager" class="com.dufy.webscocket.session.data.DefaultWebSocketSessionManager" /> <!-- websocket握手拦截器 -->
<bean id="handshakeInterceptor" class="com.dufy.webscocket.interceptor.ChatHandInteceptor" /> <!-- WebSocket相关监听器 -->
<bean id="sessionConnectedListener" class="com.dufy.webscocket.listener.SessionConnectedListener" />
<bean id="sessionDisConnectedListener" class="com.dufy.webscocket.listener.SessionClosedListener" />
<bean id="sessionSubscribeListener" class="com.dufy.webscocket.listener.SessionSubscribeListener" /> </beans>

3、添加代码

1.后台代码目录

![这里写图片描述](http://img.blog.csdn.net/20170813111044867?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDY0ODU1NQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

2.前台代码

(1)建立websocket的jsp页面:
```

<script src="${pageContext.request.contextPath}/recourse/jquery-1.7.2.min.js"></script>
<script src="${pageContext.request.contextPath}/recourse/stomp.js"></script>
<script src="${pageContext.request.contextPath}/recourse/sockjs.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
connect();
//checkoutUserlist();
}); var projectName = "springwebscoket";
var baseUrl= getBaseUrl();
var stompClient = null;
console.log("baseUrl = " + baseUrl);
//this line.
function connect() {
console.log('Connected: ----------------------------------');
var userid = document.getElementById('name').value; var socket = new SockJS(baseUrl + projectName +"/chat");
console.log("=-="+ socket);
stompClient = Stomp.over(socket); stompClient.connect({}, function(frame) {
setConnected(true);
console.log('Connected: ' + frame); stompClient.ws.onclose = function (CloseEvent){
console.log("ERROR","weboscket close code is " + CloseEvent.code);
setConnected(false);
}; //系统订阅消息
stompClient.subscribe('/user/queue/system/newMsg', function (greeting) {
console.log("------ue/system/newMsg-----------");
console.log(greeting);
showGreeting(JSON.parse(greeting.body).content);
}); //新消息订阅
stompClient.subscribe('/user/queue/chat/newMsg', function (greeting) {
console.log("/chat/newMsg" + greeting);
$("#showMessage").append("<p>"+JSON.parse(greeting.body).message+"</p>")
//showGreeting(JSON.parse(greeting.body).content);
}); //访客消息响应订阅
stompClient.subscribe('/user/queue/chat/msgResponse', function (greeting) {
alert("收到信息");
}); //关闭订阅消息
stompClient.subscribe('/user/queue/system/close', function (greeting) {
var retCode = JSON.parse(greeting.body).retCode;
if(retCode == "000000"){
_evaluate.open();
disconnect();
}
}); },function(error){
var msg = "会话建立失败,请稍候重试!";
alert(msg);
setConnected(false); });
} function sendName() {
var name = document.getElementById('name').value;
stompClient.send("/app/sendMessage", {}, JSON.stringify({ 'name': name }));
} function disconnect() {
if (stompClient != null) {
stompClient.disconnect();
}
setConnected(false);
console.log("Disconnected");
} function setConnected(connected) {
document.getElementById('connect').disabled = connected;
document.getElementById('disconnect').disabled = !connected;
document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
document.getElementById('response').innerHTML = '';
} function showGreeting(message) {
var response = document.getElementById('response');
var p = document.createElement('p');
p.style.wordWrap = 'break-word';
p.appendChild(document.createTextNode(message));
response.appendChild(p);
} /**
* 获取baseUrl
* @returns {string}
*/
function getBaseUrl(){
var url= window.location.href;
var num = url.indexOf(projectName);
var baseUrlStr = url.substring(0,num);
return baseUrlStr;
}
</script>

Welcome

${name }

访问此页面

Connect
ConnectAny
Disconnect
you can send message to WebSocketMessageController[ @MessageMapping("/sendMessage") ]
Send

<div id="showMessage">

</div>

Spring 学习——基于Spring WebSocket 和STOMP实现简单的聊天功能的更多相关文章

  1. Spring学习(十一)-----Spring使用@Required注解依赖检查

    Spring学习(九)-----Spring依赖检查 bean 配置文件用于确定的特定类型(基本,集合或对象)的所有属性被设置.在大多数情况下,你只需要确保特定属性已经设置但不是所有属性.. 对于这种 ...

  2. Spring学习(六)-----Spring使用@Autowired注解自动装配

    Spring使用@Autowired注解自动装配 在上一篇 Spring学习(三)-----Spring自动装配Beans示例中,它会匹配当前Spring容器任何bean的属性自动装配.在大多数情况下 ...

  3. aop学习总结二------使用cglib动态代理简单实现aop功能

    aop学习总结二------使用cglib动态代理简单实现aop功能 模拟业务需求: 1.拦截所有业务方法 2.判断用户是否有权限,有权限就允许用户执行业务方法,无权限不允许用户执行业务方法 (判断是 ...

  4. spring学习(三) ———— spring事务操作

    前面一篇博文讲解了什么是AOP.学会了写AOP的实现,但是并没有实际运用起来,这一篇博文就算是对AOP技术应用的进阶把,重点是事务的处理. --wh 一.jdbcTemplate 什么是JdbcTem ...

  5. spring学习12 -Spring 框架模块以及面试常见问题注解等

    以下为spring常见面试问题: 1.Spring 框架中都用到了哪些设计模式? Spring框架中使用到了大量的设计模式,下面列举了比较有代表性的: 代理模式—在AOP和remoting中被用的比较 ...

  6. Spring学习【Spring概述】

    从本文開始,我们就要一起学习Spring框架,首先不得不说Spring框架是一个优秀的开源框架. 当中採用IoC原理实现的基于Java Beans的配置管理和AOP的思想都是非常值得学习与使用的.以下 ...

  7. Spring boot 基于Spring MVC的Web应用和REST服务开发

    Spring Boot利用JavaConfig配置模式以及"约定优于配置"理念,极大简化了基于Spring MVC的Web应用和REST服务开发. Servlet: package ...

  8. Spring学习笔记—Spring之旅

    1.Spring简介     Spring是一个开源框架,最早由Rod Johnson创建,并在<Expert One-on-One:J2EE Design and Development> ...

  9. Spring学习笔记--spring+mybatis集成

    前言: 技术的发展, 真的是日新月异. 作为javaer, 都不约而同地抛弃裸写jdbc代码, 而用各种持久化框架. 从hibernate, Spring的JDBCTemplate, 到ibatis, ...

随机推荐

  1. [Shell] 文件名截取的问题:bash .vs. csh

    参考: http://bbs.chinaunix.net/thread-1825455-1-1.html 但是, 经常处理更复杂的文件名, 这里给出一个加长版的例子, 换汤不换药. 查询当前shell ...

  2. Spring、mybaits整合

    mybatis.cfg.xml <!DOCTYPE configuration PUBLIC "-//mybatis.org/DTD Config 3.0//EN" &quo ...

  3. powerDesigner 报Unable to connect SQLState=08004 解决方法

    在使用PowerDesigner配置数据库连接(configure connections)的时候,点击Test connection之后弹出Unable to connect SQLState=08 ...

  4. HDU2451:Simple Addition Expression

    Problem Description A luxury yacht with 100 passengers on board is sailing on the sea in the twiligh ...

  5. Couldn&#39;t save uncommitted changes.

    关于idea切换分支报错的问题. Couldn't save uncommitted changes. Tried to save uncommitted changes in stash befor ...

  6. C#“必须先将当前线程设置为单个线程单元(STA)模式方可进行OLE调用”异常解决方案

    关于这类问题网上搜索会有很多解决方案,但基本的意思都相差不大,大致问题出于启用线程时调用类似剪贴板Clipboard.SetDataObject出错,我把我的测试代码展现下: 解决方案:只需将thre ...

  7. 14. pt-kill

    pt-kill h=192.168.100.101,P=3306,u=admin,p=admin \--match-user "user01" \--match-host &quo ...

  8. about the libiconv.2.dylib

    https://stackoverflow.com/questions/5835847/libiconv-2-dylib-mac-os-x-problem https://blog.csdn.net/ ...

  9. react-native react-navigation StackNavigator android导航栏 标题下居中

    navigationOptions:({ navigation }) => ({ , textAlign:'center' }}) 如上设置即可,如果有返回箭头,那么右边也要加一个 占位的或者设 ...

  10. Django商城项目笔记No.16用户部分-用户中心收货地址

    首先完成省市区三级联动 新建areas应用 python ../../manage.py startapp areas 模型类代码 class Area(models.Model): "&q ...