首页 > 代码库 > Spring WebSocket教程（二）
Spring WebSocket教程（二）
实现目标
这一篇文章，就要直接实现聊天的功能，并且，在聊天功能的基础上，再实现缓存一定聊天记录的功能。
第一步：聊天实现原理
首先，需要明确我们的需求。通常，网页上的聊天，都是聊天室的形式，所以，这个例子也就有了一个聊天的空间的概念，只要在这个空间内，就能够一起聊天。其次，每个人都能够发言，并且被其他的人看到，所以，每个人都会将自己所要说的内容发送到后台，后台转发给每一个人。
在客户端，可以用Socket很容易的实现；而在web端，以前都是通过轮询来实现的，但是WebSocket出现之后，就可以通过WebSocket像Socket客户端一样，通过长连接来实现这个功能了。
第二步：服务端基础代码
通过上面的原理分析可以知道，需要发送到后台的数据很简单，就是用户信息，聊天信息，和所在的空间信息，因为是一个简单的例子，所以bean就设计的比较简单了：
public class UserChatCommand {
private String name;
private String chatContent;
private String coordinationId;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getChatContent() {
return chatContent;
}
public void setChatContent(String chatContent) {
this.chatContent = chatContent;
}
public String getCoordinationId() {
return coordinationId;
}
public void setCoordinationId(String coordinationId) {
this.coordinationId = coordinationId;
}
@Override
public String toString() {
return "UserChatCommand{" +
"name='" + name + '\'' +
", chatContent='" + chatContent + '\'' +
", coordinationId='" + coordinationId + '\'' +
'}';
}
}通过这个bean来接收到web端发送的消息，然后在服务端转发，接下来就是转发的逻辑了，不过首先需要介绍一下Spring WebSocket的一个annotation。spring mvc的controller层的annotation是RequestMapping大家都知道，同样的，WebSocket也有同样功能的annotation，就是MessageMapping，其值就是访问地址。现在就来看看controller层是怎么实现的吧：
/**
* WebSocket聊天的相应接收方法和转发方法
*
* @param userChat 关于用户聊天的各个信息
*/
@MessageMapping("/userChat")
public void userChat(UserChatCommand userChat) {
//找到需要发送的地址
String dest = "/userChat/chat" + userChat.getCoordinationId();
//发送用户的聊天记录
this.template.convertAndSend(dest, userChat);
}怎么这么简单？呵呵，能够这么简单的实现后台代码，全是Spring的功劳。首先，我们约定好发送地址的规则，就是chat后面跟上之前发送过来的id，然后通过这个“template”来进行转发，这个“template”是Spring实现的一个发送模板类：SimpMessagingTemplate，在我们定义controller的时候，可以在构造方法中进行注入：@Controller
public class CoordinationController {
......
//用于转发数据(sendTo)
private SimpMessagingTemplate template;
<pre name="code" class="java"> @Autowired
public CoordinationController(SimpMessagingTemplate t) {
template = t;
}
.....
}
现在就已经将用户发送过来的聊天信息转发到了一个约定的空间内，只要web端的用户订阅的是这个空间的地址，那么就会收到转发过来的json。现在来看看web端需要做什么吧。第三步：Web端代码
上一篇文章中已经介绍过了连接WebSocket，所以这里就不重复的说了。
首先我们创建一个页面，在页面中写一个textarea（id=chat_content）用来当做聊天记录显示的地方，写一个input（id=chat_input）当做聊天框，写一个button当做发送按钮，虽然简陋了点，页面的美化留到功能实现之后吧。
现在要用到上一篇文章中用于连接后台的stompClient了，将这个stompClient定义为全局变量，以方便我们在任何地方使用它。按照逻辑，我们先写一个发送消息的方法，这样可以首先测试后台是不是正确。
我们写一个function叫sendName（写代码的时候乱取的
），并且绑定到发送按钮onclick事件。我们要做的事情大概是以下几步：
），并且绑定到发送按钮onclick事件。我们要做的事情大概是以下几步：1.获取input
2.所需要的数据组装一个string
3.发送到后台
第一步很简单，使用jquery一秒搞定，第二步可以使用JSON.stringify()方法搞定，第三步就要用到stompClient的send方法了，send方法有三个参数，第一个是发送的地址，第二个参数是头信息，第三个参数是消息体，所以sendName的整体代码如下：
//发送聊天信息
function sendName() {
var input = $('#chat_input');
var inputValue = http://www.mamicode.com/input.val();>其中，name和coordinationId是相应的用户信息，可以通过ajax或者jsp获取，这里就不多说了。解释一下为什么地址是"/app/userChat"：
在第一篇文章中配置了WebSocket的信息，其中有一项是ApplicationDestinationPrefixes，配置的是"/app"，从名字就可以看出，是WebSocket程序地址的前缀，也就是说，其实这个"/app"是为了区别普通地址和WebSocket地址的，所以只要是WebSocket地址，就需要在前面加上"/app"，而后台controller地址是"/userChat"，所以，最后形成的地址就是"/app/userChat"。
现在运行一下程序，在后台下一个断点，我们就可以看到，聊天信息已经发送到了后台。但是web端啥都没有显示，这是因为我们还没有订阅相应的地址，所以后台转发的消息根本就没有去接收。
回到之前连接后台的函数：stompClient.connect(‘‘, ‘‘, function (frame) {})，可以注意到，最后一个是一个方法体，它是一个回调方法，当连接成功的时候就会调用这个方法，所以我们订阅后台消息就在这个方法体里做。stompClient的订阅方法叫subscribe，有两个参数，第一个参数是订阅的地址，第二个参数是接收到消息时的回调函数。接下来就来尝试订阅聊天信息：
根据之前的约定，可以得到订阅的地址是‘/coordination/coordination‘ + coordinationId，所以我们订阅这个地址就可以了，当订阅成功后，只要后台有转发消息，就会调用第二个方法，并且，将后台传过来的消息体作为参数。所以订阅的方法如下：
//用户聊天订阅
stompClient.subscribe('/userChat/chat' + coordinationId, function (chat) {
showChat(JSON.parse(chat.body));
});
将消息体转为json，再写一个显示聊天信息的方法就可以了，显示聊天信息的方法不再解释，如下：//显示聊天信息
function showChat(message) {
var response = document.getElementById('chat_content');
response.value += decodeURIComponent(message.name) + ':' + decodeURIComponent(message.chatContent) + '\n';
}因为之前处理中文问题，所以发到后台的数据是转码了的，从后台发回来之后，也需要将编码转回来。到这里，聊天功能就已经做完了，运行程序，会发现，真的可以聊天了！一个聊天程序，就是这么简单。
但是这样并不能满足，往后的功能可以发挥我们的想象力来添加，比如说：我觉得，聊天程序，至少也要缓存一些聊天记录，不然后进来的用户都不知道之前的用户在聊什么，用户体验会非常不好，接下来就看看聊天记录的缓存是怎么实现的吧。
第四步：聊天记录缓存实现
由于是一个小程序，就不使用数据库来记录缓存了，这样不仅麻烦，而且效率也低。我简单的使用了一个Map来实现缓存。首先，我们在controller中定义一个Map，这样可以保证在程序运行的时候，只有一个缓存副本。Map的键是每个空间的id，值是缓存信息。
private Map<Integer, Object[]> coordinationCache = new HashMap<Integer, Object[]>();这里我存的是一个Object数组，是因为我写的程序中，除了聊天信息的缓存，还有很多东西要缓存，只是将聊天信息的缓存放在了这个数组中的一个位置里。
为了简单起见，可以直接将web端发送过来的UserChatCommand对象存储到缓存里，而我们的服务器资源有限，既然我用Map放到内存中实现缓存，就不会没想到这点，我的想法是实现一个固定大小的队列，当达到队列大小上限的时候，就弹出最先进的元素，再插入要进入的元素，这样就保留了最新的聊天记录。
但是貌似没有这样的队列（我反正没在jdk中看到），所以我就自己实现了这样的一个队列，实现非常的简单，类名叫LimitQueue，使用泛型，继承自Queue，类中定义两个成员变量：
我反正没在jdk中看到），所以我就自己实现了这样的一个队列，实现非常的简单，类名叫LimitQueue，使用泛型，继承自Queue，类中定义两个成员变量：private int limit; private Queue<E> queue;limit代表队列的上限，queue是真正使用的队列。创建一个由这两个参数形成的构造方法，并且实现Queue的所有方法，所有的方法都由queue对象去完成，比如：
@Override
public int size() {
return queue.size();
}
@Override
public boolean isEmpty() {
return queue.isEmpty();
}其中，有一个方法需要做处理： @Override
public boolean offer(E e) {
if (queue.size() >= limit) {
queue.poll();
}
return queue.offer(e);
}加入元素的时候，判断是否达到了上限，达到了的话就先出队列，再入队列。这样，就实现了固定大小的队列，并且总是保持最新的记录。然后，在web端发送聊天消息到后台的时候，就可以将消息记录在这个队列中，保存在Map里，所以更改之后的聊天接收方法如下：
/**
* WebSocket聊天的相应接收方法和转发方法
*
* @param userChat 关于用户聊天的各个信息
*/
@MessageMapping("/userChat")
public void userChat(UserChatCommand userChat) {
//找到需要发送的地址
String dest = "/userChat/chat" + userChat.getCoordinationId();
//发送用户的聊天记录
this.template.convertAndSend(dest, userChat);
//获取缓存，并将用户最新的聊天记录存储到缓存中
Object[] cache = coordinationCache.get(Integer.parseInt(userChat.getCoordinationId()));
try {
userChat.setName(URLDecoder.decode(userChat.getName(), "utf-8"));
userChat.setChatContent(URLDecoder.decode(userChat.getChatContent(), "utf-8"));
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
((LimitQueue<UserChatCommand>) cache[1]).offer(userChat);
}已经有缓存了，只要在页面上取出缓存就能显示聊天记录了，可以通过ajax或者jsp等方法，不过，WebSocket也有方法可以实现，因为Spring WebSocket提供了一个叫SubscribeMapping的annotation，这个annotation标记的方法，是在订阅的时候调用的，也就是说，基本是只执行一次的方法，很适合我们来初始化聊天记录。所以，在订阅聊天信息的代码下面，可以增加一个初始化聊天记录的方法。我们先写好web端的代码： //初始化
stompClient.subscribe('/app/init/' + coordinationId, function (initData) {
console.log(initData);
var body = JSON.parse(initData.body);
var chat = body.chat;
chat.forEach(function(item) {
showChat(item);
});
});这次订阅的地址是init，还是加上coordinationId来区分空间，发送过来的数据是一个聊天记录的数组，循环显示在对话框中。有了web端代码的约束，后台代码也基本出来了，只要使用SubscribeMapping，再组装一下数据就完成了，后台代码如下：/**
* 初始化，初始化聊天记录
*
* @param coordinationId 协同空间的id
*/
@SubscribeMapping("/init/{coordinationId}")
public Map<String,Object> init(@DestinationVariable("coordinationId") int coordinationId) {
System.out.println("------------新用户进入，空间初始化---------");
Map<String, Object> document = new HashMap<String, Object>();
document.put("chat",coordinationCache.get(coordinationId)[1]);
return document;
}就这样，缓存聊天记录也实现了。结语
这是我的毕业设计，我的毕业设计是一个在线协同备课系统，用于多人在线同时且实时操作文档和演示文稿，其中包含了聊天这个小功能，所以使用它来讲解一下Spring WebSocket的使用。
我将代码放到了github上，有兴趣的朋友可以去看看代码，接下来，我会考虑将我的毕业设计的源码介绍一下，其中有很多不足，也希望大家指正。
github地址：https://github.com/xjyaikj/OnlinePreparation
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。