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

已于 2023-12-28 14:38:51 修改
阅读量3.2w 收藏 236
点赞数 50
分类专栏： 小程序 Java 文章标签： 小程序 微信小程序 java
于 2022-11-11 17:40:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wml_JavaKill/article/details/127807331
版权

一、文章前言

此文主要实现在小程序内聊天对话功能，使用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 {



    /**
     * 连接建立成功调用的方法
     * <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 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<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();
    }


    
}

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

在这里插入图片描述

<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方法。

var socket = null;
Page({
  data: {
    InputBottom: 0,
    chatData: [],
    content: '', //需要发送的内容
    userId: 2,
  },
  onLoad() {
    let that = this;

    socket = wx.connectSocket({
      url: 'ws://localhost:8080/imserver/2',
      success: res => {
          console.info('创建连接成功');
          //socketTaskId: 22
          // console.info(res);
      }
  });
  // console.info(socket);
  //事件监听
  socket.onOpen(function () {
      console.info('连接打开成功');
  });
  socket.onClose(function () {
      console.info('连接关闭成功');
  });
  socket.onError(function () {
      console.info('连接报错');
  });
  //服务器发送监听
  socket.onMessage(function (e) {
    console.info(e.data);
    var list=JSON.parse(e.data);
    
    that.setData({chatData:list});


  });
      wx.request({
        url: 'http://localhost:8080/getMessage?userId=2',
        method: 'get',
        dataType: "json",
        success: function (res) {
          that.setData({
            chatData: res.data
          });
        }
      });
      wx.pageScrollTo({
        scrollTop: 9999
      })
  },
  InputFocus(e) {
    this.setData({
      InputBottom: e.detail.height
    })
  },
  formMsg(e) {
    this.setData({
      content: e.detail.value.trim()
    })
  },
  //发送消息
  sendMsg() {
    let that = this;
    let info = {
      userName: '李四',
      content: that.data.content,
      userId: 2,
      targetUserId: 1,
      targetUserName: "张三"
    };
    wx.request({
      url: 'http://localhost:8080/push',
      data: JSON.stringify(info),
      method: 'post',
      contentType:"application/json",
      dataType: "json",
      success: function (identify) {
        that.setData({
          content: '',
        });
        //发送消息后
     
        wx.pageScrollTo({
          scrollTop: 9999
        })

      }
    });
  },

  InputBlur(e) {
    this.setData({
      InputBottom: 0
    })
  }
})

//查询消息列表
function selectMsg() {
  let that = this;

};

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


<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长连接的方式来实现这个功能，完成后源码会以资源的形式上传提供给大家。

无语小咪
关注
  • 50
    点赞
  • 踩
  • 236
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 45
    评论
专栏目录
微信小程序websocket实现即时聊天功能
10-16
主要为大家详细介绍了微信小程序websocket实现即时聊天功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
java与微信小程序实现websocket长连接
08-26
主要为大家详细介绍了java与微信小程序实现websocket长连接，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序demo：在线聊天功能(源代码+截图)
06-19
微信小程序demo：在线聊天功能(源代码+截图)微信小程序demo：在线聊天功能(源代码+截图)微信小程序demo：在线聊天功能(源代码+截图)微信小程序demo：在线聊天功能(源代码+截图)微信小程序demo：在线聊天功能(源代码+截图)微信小程序demo：在线聊天功能(源代码+截图)微信小程序demo：在线聊天功能(源代码+截图)微信小程序demo：在线聊天功能(源代码+截图)微信小程序demo：在线聊天功能(源代码+截图)微信小程序demo：在线聊天功能(源代码+截图)微信小程序demo：在线聊天功能(源代码+截图)微信小程序demo：在线聊天功能(源代码+截图)微信小程序demo：在线聊天功能(源代码+截图)微信小程序demo：在线聊天功能(源代码+截图)微信小程序demo：在线聊天功能(源代码+截图)微信小程序demo：在线聊天功能(源代码+截图)微信小程序demo：在线聊天功能(源代码+截图)微信小程序demo：在线聊天功能(源代码+截图)微信小程序demo：在线聊天功能(源代码+截图)微信小程序demo：在线聊天功能(源代码+截图)微信小程序demo：在线聊天功能(源代码
微信小程序开发中的实时聊天和即时通讯
最新发布
吃不胖.
03-18 489
实时聊天和即时通讯是微信小程序中常见的功能之一。在本文中，我们将使用微信小程序云开发和腾讯云的即时通讯服务（TIM）来实现一个简单的实时聊天功能。在开始之前，我们需要先创建一个微信小程序并开通云开发功能。我们还需要在腾讯云上创建一个即时通讯服务，并获取到相关配置信息。一、创建微信小程序云开发环境。三、配置微信小程序云开发环境。二、创建腾讯云即时通讯服务。四、编写前端页面代码。
微信聊天微信小程序源码.zip
07-13
微信聊天微信小程序源码.zip
微信小程序WebSocket实现聊天对话功能
01-03
本文实例为大家分享了微信小程序WebSocket实现聊天对话功能的具体代码，供大家参考，具体内容如下 js var app = getApp(); var socketOpen = false; var frameBuffer_Data, session, SocketTask; var url = 'ws://请填写您的长链接接口地址'; var upload_url ='请填写您的图片上传接口地址' Page({ data: { user_input_text: '',//用户输入文字 inputValue: '', returnValue: '', addImg: f
【微信开发】微信小程序实现实时聊天功能
weixin_57788079的博客
03-29 1万+
你可以拿去实现一下它的实例代码，看看打印，感受一下。1.说到底，聊天界面就是循环一个数组，每一行为一个单位（item），循环（wx.for）我们设置的装聊天记录的数组。3.我们在很多的带有聊天功能的系统中都知道，进入页面和发送信息我们的需要将视角放置到我们刚更新的那条信息，则就有。②在循环体中加上id="item{{index}}"，意为：设置当前循环体的id为当前item对应下标；wx:if="{{item.id == 1}}"和wx:if="{{item.id == 0}}"2.如何实现实时更新；
开发微信小程序模拟聊天步骤及代码
特创数字
02-16 2121
1. 创建小程序项目：使用微信开发者工具创建一个小程序项目，并在项目中添加一个页面，用于模拟聊天。 2. 定义数据结构：定义一个数据结构，用于存储聊天记录，包括发送者、接收者、消息内容等信息。 3. 实现聊天功能：实现聊天功能，包括发送消息、接收消息、显示消息等功能。 4. 实现界面：使用微信小程序的界面框架，实现聊天界面，包括聊天记录列表、输入框等。 代码示例： // 定义数据结构 var chatData = { sender: '', receiver: '', message: '' };
微信小程序云开发实现一对一即时聊天，发送语音、文件、图片、朋友圈、添加好友等功能
欢迎光临
04-06 1万+
利用云开发的即时通信demo做的仿照微信好友聊天。群聊、私聊、订阅消息、添加好友等
微信小程序 WebSocket 通信 —— 在线聊天
灵魂学者的博客
04-29 7744
本篇通过WebSocket通信实现客户端(小程序)和服务器端(Node.js搭载的服务器)的对话聊天，客户端通过小程序的WebSocket API 实现，服务器使用Node.js来搭载简易的服务器。感兴趣的读者可以观览一下！
微信小程序云开发实现一对一聊天
欢迎光临
10-27 2万+
微信小程序云开发实现一对一聊天 有的时候小程序可以会涉及到聊天，评论的等功能，像博客，外卖平台等。这篇文章就先介绍的怎样借助云开发实现即时一对一，不同场景的聊天的功能。 首先要创建创建一个新的云开发的小程序。我们可以借助云开发的即时通信模板来实现我们自己的功能。如果你不知道云开发怎么使用，可以去查看开发文档。 会看到控制台出现了开始监听等信息，这是利用的 Collection.watch。具体.........
微信小程序实现聊天对话(文本、图片)功能
08-27
主要为大家详细介绍了微信小程序实现聊天对话功能，可以发送文本、图片，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序即时聊天的实现源码+后台java源码
05-15
工程说明：解压后会有两个工程，一个小程序源码（MetroIM），二是后台源码（MetroIMChat） 小程序端源码：socket的连接地址写在了app.js中，聊天历史记录也已实现了本地存储，下次打开，保证历史聊天记录不会丢失 后台java源码：后台采用了WebSocket实现，服务启动主入口ChatServer.java，默认端口为8888，可自行修改 适合人群：两端源码都已提供，请根据自身的技术水平进行二次开发和使用，各取所需自己需要的源码 阅读建议：本项目作为一个基础框架项目，可以直接在此基础上进行业务项目的开发 在线技术解答：代码里有任何不明白的，都可以加本人微信号 sunjian1414
微信小程序 仿微信聊天界面
qq_36158551的博客
01-26 4255
当软键盘弹起时，将scroll-view的高度缩短至软键盘遮挡不到的屏幕上方部分，当软键盘收起时，再将scroll-view的高度还原，这样解决了遮挡问题。（3）（推荐）将所有msg都编号如：msg-0，msg-1，msg-2…（1）计算每条消息的最大高度，设置scroll-top=(单条msg最大高度 * msg条数)px。在scroll-view中添加：scroll-into-view=‘{{toView}}’，点击输入框弹出软键盘后，将已有的少许聊天内容弹出，导致看不到的问题。
微信小程序——聊天小程序——01环境搭建
qq_54462755的博客
07-20 951
selectedIconPath""icon/消息(1).png""selectedIconPath""icon/好友(1).png""selectedIconPath""icon/我的(6).png""iconPath""icon/消息(2).png","iconPath""icon/我的(5).png","iconPath""icon/好友.png","text""消息","text""好友","text""主页",//云开发环境环境的初始化。...
java实现一个简单的webSocket聊天demo
初夏0811的博客
07-09 1万+
创建webSocketConfig配置类，即注册ServerEndpointExporter，该bean用于扫描被@ServerEndpoint注解的类，并将其作为服务端.创建被@ServerEndpoint注解的类用于作为webSocket服务器并指定连接的uri。成功完成基础的websocket连接，可以开始编辑业务逻辑。到这里，我们就实现了webSocke技术，实现聊天功能了。项目启动后，测试websocket是否可用。使用注解标记对应的方法,，并启动程序。1.构建后台message实体类；
Java互联网实时聊天系统（附源码）
热门推荐
Java笔记
09-14 5万+
决定以Netty为核心，以WebSocket为应用层通信协议做一个互联网聊天系统，整体而言就像微信网页版一样，但考虑到这个聊天系统的功能非常多，因此只打算实现核心的聊天功能，包括单发、群发、文件发送，然后把项目与Spring整合做成开源、可拓展的方式，给大家参考、讨论、使用，欢迎大家的指点。关于NettyNetty 是一个利用 Java 的高级网络的能力，隐藏其背后的复杂性而提供一个易于使用的 API 的客户端/服务器框架。关于WebSocket通信协议。
在线客服微信小程序源码系统 带完整的搭建教程
2301_77558505的博客
10-10 532
源码下载地址：春哥技术博客---在线客服系统源码。大家好啊，罗峰源码来给大家分享好用的源码了。今天给大家分享的是一款在线客服系统源码，源代码全部开源，可以二次开发，一起来看看吧。同时，该系统还支持多客服接待、用户画像、快捷回复等功能，能够提高客户服务效率和质量，提升用户满意度和忠诚度。
微信小程序websocket实现实时聊天代码
05-17
小程序中使用 WebSocket 实现实时聊天的步骤如下： 1. 在小程序 app.json 文件中添加网络权限： ```json { "permission": { "scope.userLocation": { "desc": "获取用户地理位置信息" }, "scope.record": { "desc": "录音功能，用于发送语音消息" }, "scope.writePhotosAlbum": { "desc": "保存到相册功能，用于保存聊天图片" }, "scope.userInfo": { "desc": "获取用户信息，用于显示聊天用户头像和昵称" }, "scope.websocket": { "desc": "使用 WebSocket，用于实现实时聊天" } } } ``` 2. 在小程序页面中创建 WebSocket 连接： ```javascript // 建立连接 let socketTask = wx.connectSocket({ url: 'wss://your.websocket.url', success() { console.log('WebSocket 连接成功') }, fail() { console.log('WebSocket 连接失败') } }) // 监听 WebSocket 连接状态变化 socketTask.onOpen(() => { console.log('WebSocket 已连接') }) socketTask.onError(() => { console.log('WebSocket 连接错误') }) socketTask.onClose(() => { console.log('WebSocket 已关闭') }) ``` 3. 发送和接收消息： ```javascript // 发送消息 socketTask.send({ data: 'Hello, WebSocket!', success() { console.log('消息发送成功') }, fail() { console.log('消息发送失败') } }) // 接收消息 socketTask.onMessage((res) => { console.log('接收到消息：', res.data) }) ``` 完整的实时聊天代码示例： ```javascript Page({ data: { messages: [] // 聊天消息列表 }, onLoad: function() { // 建立连接 let socketTask = wx.connectSocket({ url: 'wss://your.websocket.url', success() { console.log('WebSocket 连接成功') }, fail() { console.log('WebSocket 连接失败') } }) // 监听 WebSocket 连接状态变化 socketTask.onOpen(() => { console.log('WebSocket 已连接') }) socketTask.onError(() => { console.log('WebSocket 连接错误') }) socketTask.onClose(() => { console.log('WebSocket 已关闭') }) // 接收消息 socketTask.onMessage((res) => { console.log('接收到消息：', res.data) let message = JSON.parse(res.data) let messages = this.data.messages messages.push(message) this.setData({ messages: messages }) }) }, // 发送消息 sendMessage: function(event) { let message = event.detail.value if (message) { let socketTask = wx.connectSocket({ url: 'wss://your.websocket.url' }) socketTask.send({ data: message, success() { console.log('消息发送成功') }, fail() { console.log('消息发送失败') } }) this.setData({ inputMessage: '' }) } } }) ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 45
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

无语小咪

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值