Skip to content

32.在线聊天功能实现

江南一点雨 edited this page Feb 5, 2018 · 1 revision

在线聊天使用了SpringBoot+WebSocket实现,为了保证用户隐私,所有的聊天数据都保存在系统本地,服务器只进行了数据转发。OK,那接下来,我们来看下大致的实现步骤。

服务端

服务端首先加入websocket依赖,如下:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

创建WebSocket的配置类,如下:

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
    @Override
    public void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry) {
        stompEndpointRegistry.addEndpoint("/ws/endpointChat").withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/queue","/topic");
    }
}

这里我并未使用原生的websocket协议,而是使用了websocket的子协议stomp,方便一些。消息代理既使用了/queue,又使用了/topic,主要是因为我这里既有点对点的单聊,也有发送系统消息的群聊。

创建websocket处理类controller,如下:

@Controller
public class WsController {
    @Autowired
    SimpMessagingTemplate messagingTemplate;

    @MessageMapping("/ws/chat")
    public void handleChat(Principal principal, String msg) {
        String destUser = msg.substring(msg.lastIndexOf(";") + 1, msg.length());
        String message = msg.substring(0, msg.lastIndexOf(";"));
        messagingTemplate.convertAndSendToUser(destUser, "/queue/chat", new ChatResp(message, principal.getName()));
    }
}

消息协议很简单:发送来的消息,最后一个;后面跟的是该条消息要发送到哪个用户,响应消息包含两个字段,一个是消息内容,一个是该条消息由谁发送。

OK,如此之后,我们的服务端就写好了,很简单。

前端

前端代码稍微复杂,我这里主要和小伙伴介绍下我的大致思路和核心代码,具体代码小伙伴可以star源码进行研究。

首先,当用户登录成功之后,我就发起websocket的连接,将ws连接起来,ws的代码我主要写在了store中,如下:

connect(context){
    context.state.stomp = Stomp.over(new SockJS("/ws/endpointChat"));
    context.state.stomp.connect({}, frame=> {
    context.state.stomp.subscribe("/user/queue/chat", message=> {
        var msg = JSON.parse(message.body);
        var oldMsg = window.localStorage.getItem(context.state.user.username + "#" + msg.from);
        if (oldMsg == null) {
        oldMsg = [];
        oldMsg.push(msg);
        window.localStorage.setItem(context.state.user.username + "#" + msg.from, JSON.stringify(oldMsg))
        } else {
        var oldMsgJson = JSON.parse(oldMsg);
        oldMsgJson.push(msg);
        window.localStorage.setItem(context.state.user.username + "#" + msg.from, JSON.stringify(oldMsgJson))
        }
        if (msg.from != context.state.currentFriend.username) {
        context.commit("addValue2DotMap", "isDot#" + context.state.user.username + "#" + msg.from);
        }
        //更新msgList
        var oldMsg2 = window.localStorage.getItem(context.state.user.username + "#" + context.state.currentFriend.username);
        if (oldMsg2 == null) {
        context.commit('updateMsgList', []);
        } else {
        context.commit('updateMsgList', JSON.parse(oldMsg2));
        }
    });
    }, failedMsg=> {

    });
}

连接成功之后,就可以准备接收服务端的消息了,接收到服务端的消息后,数据保存在localStorage中,保存格式是 当前用户名#消息发送方用户名:[{from:'消息发送方',msg:'消息内容'}],注意后面的是一个json数组,这两个人的聊天记录都将保存在这个数组中。在聊天展示页面,当数组中的数据发生变化时,自动更新。

在聊天页面,通过stomp发送消息,如下:

this.$store.state.stomp.send("/ws/chat", {}, this.msg + ";" + this.currentFriend.username);

每次发送成功后更新聊天页面即可。

核心代码基本如此,其他细节小伙伴可以star源码进行研究。