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

亦凉 2023-09-28 23:24 30阅读 0赞

### 一、文章前言 ###

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

![6733d6edcaea45979a0de391ce627322.gif][]

### 二、开发流程及工具准备 ###

2.1、注册微信公众平台账号。  
2.2、下载安装IntelliJ IDEA(后端语言开发工具)，Mysql数据库，微信Web开发者工具。

### 三、开发步骤 ###

> **1.创建maven project**

先创建一个名为SpringBootDemo的项目，选择【New Project】  
![在这里插入图片描述][128259d9032c457f9b5eb361fe360124.png]

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

![在这里插入图片描述][52cdd0b320714f2a93f84496ab2adb85.png]然后点击【Create】  
![在这里插入图片描述][6a7a4937c1324475824dadc93d6c1936.png]

> **2.在project下创建module**

点击右键选择【new】—【Module…】  
![在这里插入图片描述][361bb10720984c84ab8e4e259de3b751.png]  
左侧选择【Spring initializr】，通过idea中集成的Spring initializr工具进行spring boot项目的快速创建。窗口右侧：name可根据自己喜好设置，group和artifact和上面一样的规则，其他选项保持默认值即可，【next】  
![在这里插入图片描述][0c40f710188b427cb64d147257358580.png]

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

![在这里插入图片描述][a79d3bf5fff541779a7dffd605b404e0.png]

***此时，一个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**  
![在这里插入图片描述][d5bf96d652be437f87c9f5abdfb5c49a.png]![在这里插入图片描述][2a354294812c4aeb98e458fe7585874d.png]

> **4.编写WebSocket服务类**

@ServerEndpoint("/imserver/{userId}")
    @Component
    public class WebSocketService {
        
    
    
        /**
         * concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。
         */
        private static ConcurrentHashMap<String, WebSocketService> webSocketMap = new ConcurrentHashMap<>();
        /**
         * 与某个客户端的连接会话，需要通过它来给客户端发送数据
         */
        private Session session;
        /**
         * 接收userId
         */
        private String userId = "";
    
        public static ChatMapper chatMapper = null;
    
    
        /**
         * 连接建立成功调用的方法
         * <p>
         * 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 session
         * @param error
         */
        @OnError
        public void onError(Session session, Throwable error) {
        
            error.printStackTrace();
        }
    
        /**
         * 实现服务器推送到对应的客户端
         */
        public void sendMessage(String message) {
        
            try {
        
                this.session.getBasicRemote().sendText(message);
            } catch (IOException e) {
        
                e.printStackTrace();
            }
        }
    
    
        /**
         * 自定义 指定的userId服务端向客户端发送消息
         */
        public static void sendInfo(Chat chat) {
        
            QueryWrapper<Chat> queryWrapper = new QueryWrapper();
            List<Chat> chats=chatMapper.selectList(queryWrapper.lambda()
                    .eq(Chat::getTargetUserId, chat.getTargetUserId()).or().eq(Chat::getUserId, chat.getTargetUserId()).or().eq(Chat::getTargetUserId, chat.getUserId()).or().eq(Chat::getUserId, chat.getUserId()));
    
            //log.info("发送消息到:"+userId+"，报文:"+message);
            if (!StringUtils.isEmpty(chat.getTargetUserId().toString()) && webSocketMap.containsKey(chat.getTargetUserId().toString())) {
        
                webSocketMap.get(chat.getUserId().toString()).sendMessage(JSONObject.toJSONString(chats));
                webSocketMap.get(chat.getTargetUserId().toString()).sendMessage(JSONObject.toJSONString(chats));
            } else {
        
                webSocketMap.get(chat.getUserId().toString()).sendMessage(JSONObject.toJSONString(chats));
            }
        }
    
        /**
         * 自定义关闭
         *
         * @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  
![在这里插入图片描述][750c18a066084b5a94618e5761393491.png]

创建一个Controller  
![在这里插入图片描述][56dc3807df9e489c9185257807a1e49d.png]  
输入类名，选在【Class】  
![在这里插入图片描述][51708a3b06f14f67aa4a586ab6fa176a.png]

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

> 6.创建具体的Api接口

@RestController
    public class DemoController {
        
    
        @Autowired
        private ChatService chatService;
    
        @PostMapping("/push")
        public ResponseEntity<String> 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();
        }
    
    
        @GetMapping("/getMessage")
        public ResponseEntity<List<Chat>> getMessage(String userId) {
        
            QueryWrapper<Chat> queryWrapper = new QueryWrapper();
            List<Chat> list = chatService.
                    list(queryWrapper.lambda().eq(Chat::getTargetUserId, userId).or().eq(Chat::getUserId, userId));
            return ResponseEntity.ok(list);
        }
    
    }

7.小程序代码  
![在这里插入图片描述][8af5a15fe6ae4574b228976ab82de44a.png]  
3.20、在pages文件夹下面创建一个文件夹并新建对应的page文件，并实现聊天对话框样式。  
![在这里插入图片描述][e741eb08c96b4239893d909a0decc102.png]

![在这里插入图片描述][a35b597618f64050a2889ee8ae3cdc5d.png]

<view class="cu-chat" id="j_page">
      <view class="cu-item 'self'" wx:for="{
        {chatData}}">
        <view class="main">
          <view class="content shadow bg-green">
            <text>{
        {
        item.content}}</text>
          </view>
        </view>
        <view class="cu-avatar radius" style="background-image:url(../../../images/cat.jpg)"></view>
        <view class="date">{
        {
        item.createTime}}</view>
      </view>
    </view>
    
    <view class="cu-bar foot input {
        {InputBottom!=0?'cur':''}}" style="bottom:{
        {InputBottom}}px">
      <view class="action">
        <text class="cuIcon-sound text-grey"></text>
      </view>
      <input class="solid-bottom" value="{
        {content}}" bindinput="formMsg"  bindfocus="InputFocus" bindblur="InputBlur" adjust-position="{
        {false}}" focus="{
        {false}}" maxlength="300" cursor-spacing="10"></input>
      <view class="action">
        <text class="cuIcon-emojifill text-grey"></text>
      </view>
      <button class="cu-btn bg-green shadow" bindtap="sendMsg">发送</button>
    </view>

.cu-chat {
        
    	display: flex;
    	flex-direction: column;
    }
    
    .cu-chat .cu-item {
        
    	display: flex;
    	padding: 30rpx 30rpx 70rpx;
    	position: relative;
    }
    
    .cu-chat .cu-item>.cu-avatar {
        
    	width: 80rpx;
    	height: 80rpx;
    }
    
    .cu-chat .cu-item>.main {
        
    	max-width: calc(100% - 260rpx);
    	margin: 0 40rpx;
    	display: flex;
    	align-items: center;
    }
    
    .cu-chat .cu-item>image {
        
    	height: 320rpx;
    }
    
    .cu-chat .cu-item>.main .content {
        
    	padding: 20rpx;
    	border-radius: 6rpx;
    	display: inline-flex;
    	max-width: 100%;
    	align-items: center;
    	font-size: 30rpx;
    	position: relative;
    	min-height: 80rpx;
    	line-height: 40rpx;
    	text-align: left;
    }
    
    .cu-chat .cu-item>.main .content:not([class*="bg-"]) {
        
    	background-color: var(--white);
    	color: var(--black);
    }
    
    .cu-chat .cu-item .date {
        
    	position: absolute;
    	font-size: 24rpx;
    	color: var(--grey);
    	width: calc(100% - 320rpx);
    	bottom: 20rpx;
    	left: 160rpx;
    }
    
    .cu-chat .cu-item .action {
        
    	padding: 0 30rpx;
    	display: flex;
    	align-items: center;
    }
    
    .cu-chat .cu-item>.main .content::after {
        
    	content: "";
    	top: 27rpx;
    	transform: rotate(45deg);
    	position: absolute;
    	z-index: 100;
    	display: inline-block;
    	overflow: hidden;
    	width: 24rpx;
    	height: 24rpx;
    	left: -12rpx;
    	right: initial;
    	background-color: inherit;
    }
    
    .cu-chat .cu-item.self>.main .content::after {
        
    	left: auto;
    	right: -12rpx;
    }

3.21、在JS中实现请求聊天列表及新增聊天信息的接口，使用websocket进行实时刷新聊天功能，提供onOpen、onClose、onError、onMessage方法。

3.22、准备两张头像，在WXML中根据对应的用户名判断聊天记录是否是自己发出，并赋对应的class样式，后续这个步骤可以直接在接口返回的数据中进行判断，请求查询列表的接口将用户token作为参数传输过去即可。

![035bd400a39249059cae4869e299a4d1.jpeg][] ![e1497b79d8484e9daeec935774ff0548.jpeg][]

<view class="cu-chat" id="j_page">
      <view class="cu-item {
        {item.userId=='2'?'self':''}}" wx:for="{
        {chatData}}">
        <view class="cu-avatar radius" style="background-image:url(../../../images/cat.jpg)" wx:if="{
        {item.userId=='1'}}"></view>
        <view class="main">
          <view class="content shadow {
        {item.userId=='1'?'bg-green':''}}">
            <text>{
        {
        item.content}}</text>
          </view>
        </view>
        <view class="cu-avatar radius" style="background-image:url(../../../images/dog.jpg)" wx:if="{
        {item.userId=='2'}}"></view>
        <view class="date">{
        {
        item.createTime}}</view>
      </view>
    </view>

3.23、请求聊天记录的接口和新增聊天信息的接口都跑通后，我们将现有小程序复制一份，在复制出的这份小程序中的JS将用户名改为张三、李四，然后发送消息。这里需要注意的是，我们需要在每次发送消息后将页面内容定位在底部，一直保持一个阅读最新消息的状态。

wx.pageScrollTo({
        
      scrollTop: 9999
    })

> 这里采用的一个比较简单的方式实现的聊天功能，用到了ws长连接的方式来实现这个功能，完成后源码会以资源的形式上传提供给大家。

[6733d6edcaea45979a0de391ce627322.gif]: https://img-blog.csdnimg.cn/6733d6edcaea45979a0de391ce627322.gif
[128259d9032c457f9b5eb361fe360124.png]: https://img-blog.csdnimg.cn/128259d9032c457f9b5eb361fe360124.png
[52cdd0b320714f2a93f84496ab2adb85.png]: https://img-blog.csdnimg.cn/52cdd0b320714f2a93f84496ab2adb85.png
[6a7a4937c1324475824dadc93d6c1936.png]: https://img-blog.csdnimg.cn/6a7a4937c1324475824dadc93d6c1936.png
[361bb10720984c84ab8e4e259de3b751.png]: https://img-blog.csdnimg.cn/361bb10720984c84ab8e4e259de3b751.png
[0c40f710188b427cb64d147257358580.png]: https://img-blog.csdnimg.cn/0c40f710188b427cb64d147257358580.png
[a79d3bf5fff541779a7dffd605b404e0.png]: https://img-blog.csdnimg.cn/a79d3bf5fff541779a7dffd605b404e0.png
[d5bf96d652be437f87c9f5abdfb5c49a.png]: https://img-blog.csdnimg.cn/d5bf96d652be437f87c9f5abdfb5c49a.png
[2a354294812c4aeb98e458fe7585874d.png]: https://img-blog.csdnimg.cn/2a354294812c4aeb98e458fe7585874d.png
[750c18a066084b5a94618e5761393491.png]: https://img-blog.csdnimg.cn/750c18a066084b5a94618e5761393491.png
[56dc3807df9e489c9185257807a1e49d.png]: https://img-blog.csdnimg.cn/56dc3807df9e489c9185257807a1e49d.png
[51708a3b06f14f67aa4a586ab6fa176a.png]: https://img-blog.csdnimg.cn/51708a3b06f14f67aa4a586ab6fa176a.png
[8af5a15fe6ae4574b228976ab82de44a.png]: https://img-blog.csdnimg.cn/8af5a15fe6ae4574b228976ab82de44a.png
[e741eb08c96b4239893d909a0decc102.png]: https://img-blog.csdnimg.cn/e741eb08c96b4239893d909a0decc102.png
[a35b597618f64050a2889ee8ae3cdc5d.png]: https://img-blog.csdnimg.cn/a35b597618f64050a2889ee8ae3cdc5d.png
[035bd400a39249059cae4869e299a4d1.jpeg]: https://img-blog.csdnimg.cn/035bd400a39249059cae4869e299a4d1.jpeg
[e1497b79d8484e9daeec935774ff0548.jpeg]: https://img-blog.csdnimg.cn/e1497b79d8484e9daeec935774ff0548.jpeg