微信小程序 | 基于小程序+Java+WebSocket实现实时聊天功能

一、文章前言

此文主要实现在小程序内聊天对话功能，使用Java作为后端语言进行支持，界面友好，开发简单。

二、开发流程及工具准备

2.1、注册微信公众平台账号。

2.2、下载安装IntelliJ IDEA(后端语言开发工具)，Mysql数据库，微信Web开发者工具。

三、开发步骤

1.创建maven project

先创建一个名为SpringBootDemo的项目，选择【New Project】

然后在弹出的下图窗口中，选择左侧菜单的【New Project】（注：和2022之前的idea版本不同，这里左侧没有【Maven】选项，不要选【Maven Archetype】！！！），输入Name(项目名)：SpringBootDemo,language选择【java】，build system选择【maven】，然后选择jdk，我这里选的是jdk18.

然后点击【Create】

2.在project下创建module

点击右键选择【new】—【Module…】

左侧选择【Spring initializr】，通过idea中集成的Spring initializr工具进行spring boot项目的快速创建。窗口右侧：name可根据自己喜好设置，group和artifact和上面一样的规则，其他选项保持默认值即可，【next】

Developer Tools模块勾选【Spring Boot DevTools】，web模块勾选【Spring Web】

此时，一个Springboot项目已经搭建完成，可开发后续功能

3.编写一个消息实体类、Mapper、service（三层架构）

@Data
public class Chat {
    @TableId(type = IdType.AUTO)
    private Long id;
    private Long userId;
    private Long targetUserId;
    private LocalDateTime createTime;
    private String userName;
    private String targetUserName;
    private String content;
}

由于我们使用mybatis-plus，所以简单的增删改查不用自己写，框架自带了，只需要实现或者继承他的Mapper、Service

4.编写WebSocket服务类

@ServerEndpoint("/imserver/{userId}")
@Component
public class WebSocketService {
    /**
     * 连接建立成功调用的方法
     * 

     * 1.用map存 每个客户端对应的MyWebSocket对象
     */
    @OnOpen
    public void onOpen(Session session, @PathParam("userId") String userId) {
        this.session = session;
        this.userId = userId;
        if (webSocketMap.containsKey(userId)) {
            webSocketMap.remove(userId);
            webSocketMap.put(userId, this);
            //加入set中
        } else {
            webSocketMap.put(userId, this);
            //加入set中
        }
    }
 
    /**
     * 自定义关闭
     *
     * @param userId
     */
    public static void close(String userId) {
        if (webSocketMap.containsKey(userId)) {
            webSocketMap.remove(userId);
        }
    }
    /**
     * 获取在线用户信息
     *
     * @return
     */
    public static Map getOnlineUser() {
        return webSocketMap;
    }

5.创建控制器Controller

先创建Controller Package

创建一个Controller

输入类名，选在【Class】

因为要编写Rest风格的Api，要在Controller上标注@RestController注解

6.创建具体的Api接口

@RestController
public class DemoController {
    @Autowired
    private ChatService chatService;
    @PostMapping("/push")
    public ResponseEntity pushToWeb(@RequestBody Chat chat) throws IOException {
        chat.setCreateTime(LocalDateTime.now());
        chatService.save(chat);
        WebSocketService.sendInfo(chat);
        return ResponseEntity.ok("MSG SEND SUCCESS");
    }
    @GetMapping("/close")
    public String close(String userId) {
        WebSocketService.close(userId);
        return "ok";
    }
    @GetMapping("/getOnlineUser")
    public Map getOnlineUser() {
        return WebSocketService.getOnlineUser();
    }
    
}

7.小程序代码

3.20、在pages文件夹下面创建一个文件夹并新建对应的page文件，并实现聊天对话框样式。