实现目标

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

第一步:聊天实现原理

首先,需要明确我们的需求。通常,网页上的聊天,都是聊天室的形式,所以,这个例子也就有了一个聊天的空间的概念,只要在这个空间内,就能够一起聊天。其次,每个人都能够发言,并且被其他的人看到,所以,每个人都会将自己所要说的内容发送到后台,后台转发给每一个人。
在客户端,可以用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
分类: 后端

1 条评论

吴彦祖 · 2017年12月21日 20:02

全文没有提netty 差评

发表回复

Avatar placeholder

您的电子邮箱地址不会被公开。 必填项已用*标注