实现目标

这一篇文章，就要直接实现聊天的功能，并且，在聊天功能的基础上，再实现缓存一定聊天记录的功能。

第一步：聊天实现原理

首先，需要明确我们的需求。通常，网页上的聊天，都是聊天室的形式，所以，这个例子也就有了一个聊天的空间的概念，只要在这个空间内，就能够一起聊天。其次，每个人都能够发言，并且被其他的人看到，所以，每个人都会将自己所要说的内容发送到后台，后台转发给每一个人。

在客户端，可以用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;
    
    @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事件。我们要做的事情大概是以下几步：

1.获取input

2.所需要的数据组装一个string

3.发送到后台

第一步很简单，使用jquery一秒搞定，第二步可以使用JSON.stringify()方法搞定，第三步就要用到stompClient的send方法了，send方法有三个参数，第一个是发送的地址，第二个参数是头信息，第三个参数是消息体，所以sendName的整体代码如下：

//发送聊天信息
function sendName() {
    var input = $('#chat_input');
    var inputValue = input.val();
    input.val("");
    stompClient.send("/app/userChat", {}, JSON.stringify({
        'name': encodeURIComponent(name),
        'chatContent': encodeURIComponent(inputValue),
        'coordinationId': coordinationId
    }));
}

其中，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 coordinationCache = new HashMap();

这里我存的是一个Object数组，是因为我写的程序中，除了聊天信息的缓存，还有很多东西要缓存，只是将聊天信息的缓存放在了这个数组中的一个位置里。

为了简单起见，可以直接将web端发送过来的UserChatCommand对象存储到缓存里，而我们的服务器资源有限，既然我用Map放到内存中实现缓存，就不会没想到这点，我的想法是实现一个固定大小的队列，当达到队列大小上限的时候，就弹出最先进的元素，再插入要进入的元素，这样就保留了最新的聊天记录。

但是貌似没有这样的队列（我反正没在jdk中看到），所以我就自己实现了这样的一个队列，实现非常的简单，类名叫LimitQueue，使用泛型，继承自Queue，类中定义两个成员变量：

private int limit;
private Queue 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) 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 init(@DestinationVariable("coordinationId") int coordinationId) {
        System.out.println("------------新用户进入，空间初始化---------");
        Map document = new HashMap();
        document.put("chat",coordinationCache.get(coordinationId)[1]);
        return document;
    }

就这样，缓存聊天记录也实现了。

结语

这是我的毕业设计，我的毕业设计是一个在线协同备课系统，用于多人在线同时且实时操作文档和演示文稿，其中包含了聊天这个小功能，所以使用它来讲解一下Spring WebSocket的使用。

我将代码放到了github上，有兴趣的朋友可以去看看代码，接下来，我会考虑将我的毕业设计的源码介绍一下，其中有很多不足，也希望大家指正。

github地址：https://github.com/xjyaikj/OnlinePreparation