微信聊天小程序-微聊（uniapp+springboot+wbsocket+rocketMq）
Conf 配置类 --- 说明：这个配置如果是在idea或者其他开发工具上运行时，也或者打包成jar包启动时必须要有这个配置类，因为没有这个配置类将导致websocket服务无法正常监听，如果是打包成war包在Tomcat内运行，那么久不能加这个配置项，所以需要注释掉，不然Tomcat会起不了，直接报错，原因是Tomcat自带websocket监听服务，如果这时候加上配置项，那么方法之间会起冲突。
·
一、ER设计
涉及两个库：crm、base，其中crm里2张表（consumer、consumer_wx_info）；base里3张表（chat_apply_record、chat_friend_role、chat_msg_record）
图：
详细表结构：
consumer ---- 主要存用户注册信息
CREATE TABLE `consumer` (
`c_id` int NOT NULL AUTO_INCREMENT COMMENT 'cid',
`w_code` varchar(25) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '账号',
`name` varchar(25) DEFAULT NULL COMMENT '姓名',
`avatar_url` varchar(255) DEFAULT NULL COMMENT '头像',
`sex` varchar(5) DEFAULT NULL COMMENT '性别',
`birth` date DEFAULT NULL COMMENT '生日',
`email` varchar(30) DEFAULT NULL COMMENT '邮箱',
`phone` varchar(11) DEFAULT NULL COMMENT '手机',
`address` varchar(255) DEFAULT NULL COMMENT '地址',
`status` tinyint DEFAULT '1' COMMENT '状态',
`w_code_update_time` date DEFAULT NULL COMMENT 'wCode更改时间',
`create_time` datetime NOT NULL COMMENT '创建时间',
`create_by` varchar(25) NOT NULL COMMENT '创建人',
`update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
`update_by` varchar(25) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '更新人',
`dr` tinyint NOT NULL DEFAULT '0' COMMENT '删除',
PRIMARY KEY (`c_id`),
UNIQUE KEY `cid_cus_index` (`c_id`) USING BTREE,
UNIQUE KEY `cus_wxCode_index` (`w_code`) USING BTREE,
UNIQUE KEY `cus_phone_index` (`phone`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;consumer_wx_info --主要存用户微信相关信息，从微信获取到的openid、用户信息等
CREATE TABLE `consumer_wx_info` (
`u_id` int NOT NULL AUTO_INCREMENT COMMENT '自增ID',
`c_id` int DEFAULT NULL COMMENT 'cid',
`nick_name` varchar(50) DEFAULT NULL COMMENT '昵称',
`avatar_url` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '头像',
`openid` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT 'openid',
`unionid` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT 'unionid',
`create_time` datetime NOT NULL COMMENT '创建时间',
`update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
`dr` tinyint(1) NOT NULL DEFAULT '0' COMMENT '删除状态',
PRIMARY KEY (`u_id`) USING BTREE,
UNIQUE KEY `openid_index` (`openid`) USING BTREE COMMENT 'openid索引',
KEY `cid_key` (`c_id`),
CONSTRAINT `cid_key` FOREIGN KEY (`c_id`) REFERENCES `consumer` (`c_id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;chat_apply_record -- 好友申请记录表，主要存好友申请记录
CREATE TABLE `chat_apply_record` (
`id` int NOT NULL AUTO_INCREMENT COMMENT '自增ID',
`apply_c_id` int NOT NULL COMMENT '申请人',
`receive_c_id` int NOT NULL COMMENT '接收人',
`info` text COMMENT '备注信息',
`apply_status` int NOT NULL DEFAULT '0' COMMENT '是否同意（0-待审核，1-已同意，2-已过期）',
`apply_time` datetime DEFAULT NULL COMMENT '同意时间',
`create_time` datetime NOT NULL COMMENT '申请时间',
`update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
PRIMARY KEY (`id`),
UNIQUE KEY `cpr_applyId_receive_index` (`apply_c_id`,`receive_c_id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;chat_friend_role -- 好友关系联系表
CREATE TABLE `chat_friend_role` (
`id` int NOT NULL AUTO_INCREMENT COMMENT '自增ID',
`c_id_a` int NOT NULL COMMENT '申请人用户ID',
`remark_a` varchar(25) DEFAULT NULL COMMENT '申请人备注',
`c_id_b` int NOT NULL COMMENT '接收人用户ID',
`remark_b` varchar(25) DEFAULT NULL COMMENT '接收人备注',
`create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '申请加为好友时间',
`dr` int NOT NULL DEFAULT '0' COMMENT '删除',
PRIMARY KEY (`id`),
UNIQUE KEY `cfr_cid_index` (`c_id_a`,`c_id_b`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;chat_msg_record --聊天记录表，主要存聊天信息
CREATE TABLE `chat_msg_record` (
`id` int NOT NULL AUTO_INCREMENT COMMENT '自增主键ID',
`s_c_id` int NOT NULL COMMENT '发送用户ID',
`r_c_id` int NOT NULL COMMENT '接收用户ID',
`type` varchar(10) NOT NULL COMMENT '消息类型',
`content` text COMMENT '内容',
`voice_length` int DEFAULT NULL COMMENT '语音时间长度',
`send_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '发送时间',
`dr` int NOT NULL DEFAULT '0' COMMENT '删除',
`read` int NOT NULL DEFAULT '0' COMMENT '已读',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;然后还有一个存储过程以及函数方法，两者都放在base库里面
存储过程用来使好友申请记录过期，函数是用来获取用户名称首字母
存储过程 -- expire_apply_record
CREATE DEFINER=`root`@`%` PROCEDURE `expire_apply_record`(
IN p_datetime DATETIME,
OUT p_status TINYINT,
OUT p_cost_time VARCHAR(20),
OUT p_msg VARCHAR(100),
OUT p_exception VARCHAR(2000))
BEGIN
DECLARE p_state_msg VARCHAR(255) DEFAULT 'N/A';
DECLARE p_error_msg1 VARCHAR(255);
DECLARE p_error_msg2 VARCHAR(255);
DECLARE p_begin_time DATETIME;
-- SQLEXCEPTION
DECLARE EXIT HANDLER FOR SQLEXCEPTION
BEGIN
GET DIAGNOSTICS CONDITION 1 p_error_msg1 = RETURNED_SQLSTATE, p_error_msg2 = MESSAGE_TEXT;
SET p_status = FALSE;
SET p_exception = CONCAT('执行异常，在【',p_state_msg,'】出错，详细：',p_error_msg1, ' : ', p_error_msg2);
END;
SET p_status = TRUE;
SET p_begin_time = CURRENT_TIMESTAMP(3);
-- NEXTWORK
UPDATE base.chat_apply_record
SET apply_status = 2
WHERE
create_time < SUBDATE( now( ), INTERVAL 7 DAY );
SET p_msg = CONCAT('本次总共更新：',ROW_COUNT(),'条数据');
SET p_cost_time = TIMEDIFF(CURRENT_TIMESTAMP(3), p_begin_time);
END2个函数：
FIRSTLETTER
CREATE DEFINER=`root`@`%` FUNCTION `FIRSTLETTER`(P_NAME VARCHAR(255)) RETURNS varchar(255) CHARSET utf8mb3
BEGIN
DECLARE V_RETURN VARCHAR(255);
DECLARE V_FIRST_CHAR VARCHAR(255);
#这块主要意思是假如传入的是英文串的话，只取首字母
set V_FIRST_CHAR =UPPER(LEFT(CONVERT(P_NAME USING gbk),1));
set V_RETURN = V_FIRST_CHAR;
#如果是这些特殊符号，直接返回#
IF V_FIRST_CHAR in ('（','）','《','》','1','2','3','4','5','6','7','8','9','0','*','+','-','=','/','\\','{','}','[',']','(',')','（','）')
THEN SET V_RETURN = '#';
#两个不相等只有一个情况，V_FIRST_CHAR是中文汉字或者中文符号。
elseif LENGTH( V_FIRST_CHAR) <> CHARACTER_LENGTH( V_FIRST_CHAR )
then
SET V_RETURN = ELT(INTERVAL(CONV(HEX(left(CONVERT(P_NAME USING gbk),1)),16,10),
0xB0A1,0xB0C5,0xB2C1,0xB4EE,0xB6EA,0xB7A2,0xB8C1,0xB9FE,0xBBF7,
0xBFA6,0xC0AC,0xC2E8,0xC4C3,0xC5B6,0xC5BE,0xC6DA,0xC8BB,
0xC8F6,0xCBFA,0xCDDA,0xCEF4,0xD1B9,0xD4D1),
'A','B','C','D','E','F','G','H','J','K','L','M','N','O','P','Q','R','S','T','W','X','Y','Z');
#如果是下面的直接原样输出
elseif V_FIRST_CHAR in ('A','B','C','D','E','F','G','H','J','K','L','M','N','O','P','Q','R','S','T','W','X','Y','Z')
then SET V_RETURN = V_RETURN;
#其他的输出#
else
SET V_RETURN = '#';
END IF;
#为空的话输出#
RETURN IFNULL(V_RETURN,'#');
ENDPINYIN
CREATE DEFINER=`root`@`%` FUNCTION `PINYIN`(P_NAME VARCHAR(255)) RETURNS varchar(255) CHARSET utf8mb4
BEGIN
DECLARE V_COMPARE VARCHAR(255);
DECLARE V_RETURN VARCHAR(255);
DECLARE I INT;
SET I = 1;
SET V_RETURN = '';
#循环截取字符
while I < LENGTH(P_NAME) do
SET V_COMPARE = SUBSTR(P_NAME, I, 1);
IF (V_COMPARE != '') THEN
#字符串拼接
SET V_RETURN = CONCAT(V_RETURN, base.FIRSTLETTER(V_COMPARE));
END IF;
SET I = I + 1;
end while;
IF (ISNULL(V_RETURN) or V_RETURN = '') THEN
SET V_RETURN = P_NAME;
END IF;
RETURN V_RETURN;
END数据库全部准备完毕 。。。。。。。。。。。
二、后端代码块
后端代码主要就三大功能组 --- 用户、消息、系统
主要讲解消息系统，其他模块代码已上传 ，可自行查看
在消息系统中我们为了保证消息的实时性需要使用websocket实现实时通信，而mq的作用就相当于消息队列，为了让消息准确发送，所以接下来注重讲解消息通过mq消息队列通知websocket发送实时消息
一、mq消息队列模块
主要两大功能块-- 消费者、生产者；生产者是在发送消息时，把消息放入mq消息队列，消费者是在用户进入系统后连接上websocket后进行消费消息；
生产者模块这儿我们主要使用顺序队列消息，主要是为了保证消息发送的顺序性，然后按照消息发送的时间按序发送给在线用户
消费者主要是实现一个监听作用
下面是整个MQ代码结构，包含4个方法，生产者、消费者、配置、枚举类（定义topic）
MQConsumer -- 提供消费者消费方法，也算是一个配置类
package com.wm.mq;
import lombok.extern.log4j.Log4j2;
import org.apache.rocketmq.client.consumer.DefaultMQPushConsumer;
import org.apache.rocketmq.client.exception.MQClientException;
import org.apache.rocketmq.common.protocol.heartbeat.MessageModel;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;
@Log4j2
@Component
public class MQConsumer {
@Value("${rocketMqConfig.groupName}") //组名
private String groupName;
@Value("${rocketMqConfig.nameSrvAddr}") //mqserver地址
private String nameSrvAddr;
public DefaultMQPushConsumer consumer(MQTopic mqTopic) {
try {
DefaultMQPushConsumer consumer = new DefaultMQPushConsumer();
consumer.setConsumerGroup(groupName);
consumer.setNamesrvAddr(nameSrvAddr);
consumer.subscribe(mqTopic.topic,mqTopic.tags);
consumer.setMessageModel(MessageModel.CLUSTERING);
return consumer; //上面是配置项，然后返回一个consumer容器，在需要消费时可直接使用该容器的一些消费方法
} catch (MQClientException e) {
log.error(e);
}
return null;
}
}
MQProducer -- 提供生产消息方法，本系统就只用到其中的顺序消息
package com.wm.mq;
import jakarta.annotation.Resource;
import lombok.extern.log4j.Log4j2;
import org.apache.rocketmq.client.producer.DefaultMQProducer;
import org.apache.rocketmq.client.producer.MessageQueueSelector;
import org.apache.rocketmq.client.producer.SendCallback;
import org.apache.rocketmq.client.producer.SendResult;
import org.apache.rocketmq.common.message.Message;
import org.apache.rocketmq.common.message.MessageQueue;
import org.springframework.stereotype.Component;
import java.util.List;
import java.util.Map;
@Log4j2
@Component
public class MQProducer {
private DefaultMQProducer defaultMQProducer;
@Resource
public void setDefaultMQProducer(DefaultMQProducer defaultMQProducer_) {
defaultMQProducer = defaultMQProducer_;
}
/**
* 发送同步消息
* @param mqTopic
* @param msg
* @return
*/
public void send(MQTopic mqTopic, Map<String,Object> msg){
try {
Message sendMsg = new Message(mqTopic.topic, mqTopic.tags, msg.toString().getBytes());
SendResult sendResult = defaultMQProducer.send(sendMsg);
log.info("==> send MqMsg: {}", sendResult);
} catch (Exception e) {
log.error(e);
}
}
/**
* 发送异步消息
* @param mqTopic
* @param msg
*/
public void asyncSend(MQTopic mqTopic, Map<String,Object> msg){
try {
Message sendMsg = new Message(mqTopic.topic, mqTopic.tags, msg.toString().getBytes());
defaultMQProducer.send(sendMsg, new SendCallback() {
@Override
public void onSuccess(SendResult sendResult) {
log.info("==> send AsyncMqMsg：{} ", sendResult);
}
@Override
public void onException(Throwable e) {
log.error(e);
}
});
}catch (Exception e){
log.error(e);
}
}
/**
* 顺序发送消息（分区key-cid） 只用到该方法生产消息
* @param mqTopic
* @param cid
* @param msg
*/
public void sendOrderMsg(MQTopic mqTopic, int cid, Map<String,Object> msg) {
try {
Message sendMsg = new Message(mqTopic.topic, mqTopic.tags, msg.toString().getBytes());
defaultMQProducer.send(sendMsg, (list, message, o) -> {
int cid1 = (int) o;
int index = cid1 % list.size();
return list.get(index);
},cid);
} catch (Exception e) {
log.error(e);
}
}
}
MQProducerConf -- 生存者配置类
package com.wm.mq;
import lombok.extern.log4j.Log4j2;
import org.apache.rocketmq.client.exception.MQClientException;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
@Log4j2
@Configuration
public class MQProducerConf {
@Value("${rocketMqConfig.groupName}") //组名
private String groupName;
@Value("${rocketMqConfig.nameSrvAddr}") //mqserver地址
private String nameSrvAddr;
@Value("${rocketMqConfig.maxMessageSize}") //消息体最大可接受的大小
private Integer maxMessageSize;
@Value("${rocketMqConfig.sendMsgTimeOut}") // 消息发送超时时间
private Integer sendMsgTimeOut;
@Value("${rocketMqConfig.retryTimesWhenSendFailed}") //消息发送失败后重试次数
private Integer retryTimesWhenSendFailed;
/**
* mq 生产者配置
* @return producer
* @throws MQClientException
*/
@Bean
public org.apache.rocketmq.client.producer.DefaultMQProducer defaultProducer() throws MQClientException {
org.apache.rocketmq.client.producer.DefaultMQProducer producer = new org.apache.rocketmq.client.producer.DefaultMQProducer();
producer.setProducerGroup(groupName);
producer.setNamesrvAddr(nameSrvAddr);
producer.setVipChannelEnabled(false);
producer.setMaxMessageSize(maxMessageSize);
producer.setSendMsgTimeout(sendMsgTimeOut);
producer.setRetryTimesWhenSendAsyncFailed(retryTimesWhenSendFailed);
producer.start();
log.info("==> rocketmq producer server register");
return producer;
}
}
MQTopic -- topic枚举类，定义topic，实现topic统一管理，方便后期维护
package com.wm.mq;
import lombok.Getter;
@Getter
public enum MQTopic {
FRIEND_MSG("TEST","FRIEND_MSG","还有消息"),
SYS_MSG("TEST","SYS_MSG","系统消息");
public final String topic;
public final String tags;
public final String info;
MQTopic(String topic, String tags, String info) {
this.topic = topic;
this.tags = tags;
this.info = info;
}
}
注：对MQ不熟悉的的可以去了解一下mq相关内容，就不在本文做过多叙述
二、websocket模块
websocket模块主要三大功能块：监听方法类、配置类、鉴权类
架构图:
Conf 配置类 --- 说明：这个配置如果是在idea或者其他开发工具上运行时，也或者打包成jar包启动时必须要有这个配置类，因为没有这个配置类将导致websocket服务无法正常监听，如果是打包成war包在Tomcat内运行，那么久不能加这个配置项，所以需要注释掉，不然Tomcat会起不了，直接报错，原因是Tomcat自带websocket监听服务，如果这时候加上配置项，那么方法之间会起冲突
package com.wm.webSocket;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
@Configuration
public class Conf {
/**
* 仅供idea或jar包运行时启用，部署到Tomcat时一定要注释掉，不然会报错
*/
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}
Server类 -- 监听方法类
package com.wm.webSocket;
import com.alibaba.fastjson2.JSON;
import jakarta.websocket.*;
import jakarta.websocket.server.PathParam;
import jakarta.websocket.server.ServerEndpoint;
import lombok.extern.log4j.Log4j2;
import org.springframework.stereotype.Component;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
@Log4j2
@ServerEndpoint("/websocket/{uid}")
@Component
public class Server {
private static int onlineCount = 0;
private Session session;
private int cid;
//用户连接websocekt信息保存map类
private static final ConcurrentHashMap<Object, Server> webSocketMap = new ConcurrentHashMap<>();
/**
* 连接
* @param session
* @param cid
*/
@OnOpen
public void onOpen(Session session, @PathParam("uid") int cid) {
this.session = session;
this.cid = cid;
if(webSocketMap.containsKey(cid)) {
webSocketMap.remove(cid);
webSocketMap.put(cid,this);
}else {
webSocketMap.put(cid,this);
onlineCount++;
}
log.info("==> user：{} is connected，countNum：{}",cid,onlineCount);
}
/**
* 错误连接
* @param session
* @param error
*/
@OnError
public void onError(Session session, Throwable error) {
log.error(error);
}
/**
* 关闭连接
*/
@OnClose
public void onClose() {
if(webSocketMap.containsKey(cid))
onlineCount--;
webSocketMap.remove(cid);
log.info("==> user：{} is logout，countNum：{}",cid,onlineCount);
}
/**
* 监听消息
* @param content
* @param session
*/
@OnMessage
public void onMessage(String content,Session session) {
log.info("==> {} sendMsg -> {}",cid,content);
}
/**
* 全局消息推送
* @param content
* @throws IOException
*/
public void sendMessage(String content) throws IOException {
this.session.getBasicRemote().sendText(content);
}
/**
* 发送消息
* @param scid
* @param rcid
* @param content
* @throws IOException
*/
public boolean send(int scid, int rcid, String type, Object content, Integer voiceLength) throws IOException {
if(webSocketMap.containsKey(rcid)) {
Map<String,Object> msgInfo = new HashMap<>();
msgInfo.put("scid",scid);
msgInfo.put("rcid",rcid);
msgInfo.put("type",type);
msgInfo.put("content",content);
msgInfo.put("voiceLength",voiceLength);
webSocketMap.get(rcid).sendMessage(JSON.toJSONString(msgInfo));
log.info("==> {} -> {} sendMsg -> {}",scid,rcid,content);
return true;
}
else {
log.info("==> {} not online",rcid);
return false;
}
}
}
Auth 鉴权类 -- websocket没有自己的拦截方法，这儿可以使用filter过滤器直接拦截带有websocket的链接，拦截到后会对websocket上的签名进行验证，当然还是直接使用系统统一的token进行鉴权；涉及到2个鉴权点，第一Token本身鉴权、以及Token带有的用户信息鉴权；Token本身鉴权就是使用jwt本身方法进行验签；用户信息鉴权针对Token带有的用户信息和websocket连接用户信息是否一致
package com.wm.webSocket;
import com.auth0.jwt.exceptions.JWTDecodeException;
import com.wm.components.JwtUtil;
import com.wm.exception.BusinessException;
import com.wm.exception.BusinessExceptionEnum;
import jakarta.servlet.*;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import lombok.extern.log4j.Log4j2;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import java.io.IOException;
import java.util.Arrays;
import java.util.Objects;
@Log4j2
@Component
public class Auth implements Filter{
private static final String[] FILTER_LIST = {"/websocket/"}; //指定要拦截的链接
private JwtUtil jwtUtil;
@Autowired
public void setJwtUtil(JwtUtil jwtUtil_) {
jwtUtil = jwtUtil_;
}
@Override
public void init(FilterConfig filterConfig) throws ServletException {
Filter.super.init(filterConfig);
}
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws ServletException, IOException {
HttpServletRequest httpServletRequest = (HttpServletRequest) servletRequest;
HttpServletResponse httpServletResponse = (HttpServletResponse) servletResponse;
String servletPath = httpServletRequest.getServletPath();
if (Arrays.stream(FILTER_LIST).anyMatch(servletPath::startsWith)) {
String token = httpServletRequest.getHeader("Sec-WebSocket-Protocol");
if (token!=null) {
String cid = jwtUtil.parseToken(token).get("cid").asString(); //获取Token中用户信息
if (Objects.equals(servletPath.split("/")[2], cid)) { // 连接websocket的用户信息和Token中用户信息进行比对
try {
jwtUtil.verifyToken(token);
} catch (JWTDecodeException e) {
throw new BusinessException(BusinessExceptionEnum.TokenExpiredException);
}
/* web需要设置socket请求头，APP和小程序不用所以要注掉 */
// httpServletResponse.setHeader("Sec-WebSocket-Protocol",token);
filterChain.doFilter(servletRequest, servletResponse);
} else {
throw new BusinessException(BusinessExceptionEnum.TokenUserNotExistException);
}
} else {
throw new BusinessException(BusinessExceptionEnum.NullTokenException);
}
} else {
filterChain.doFilter(servletRequest, servletResponse); //放行
}
}
@Override
public void destroy() {
Filter.super.destroy();
}
}
三、service 方法
service层主要方法是消息的发送、监听消息后通过websocket发送给指定用户
发送消息方法 -- 1、发送的消息存入数据库 2、发送的消息放入mq消息队列
@Override
public Map<String,Object> sendMsg(SendMsgVO sendMsgVO) {
Map<String,Object> msg = new HashMap<>();
ChatMsgRecordPO chatMsgRecordPO = new ChatMsgRecordPO();
/*消息存入数据库*/
BeanUtils.copyProperties(sendMsgVO,chatMsgRecordPO);
messageDao.saveMsg(chatMsgRecordPO);
/*MQ消息实体类赋值*/
msg.put("id",chatMsgRecordPO.getId());
msg.put("scid",sendMsgVO.getScid());
msg.put("rcid",sendMsgVO.getRcid());
msg.put("content",sendMsgVO.getContent());
msg.put("type",sendMsgVO.getType());
msg.put("sendTime", Time.getDateTime());
/*消息通过MQ发送*/
try {
mqProducer.sendOrderMsg(MQTopic.FRIEND_MSG, sendMsgVO.getRcid(), msg);
msg.put("status",true);
} catch (Exception e) {
log.error(e);
msg.put("status",false);
}
/*如不需要经过MQ中间件，直接调用websocket进行消息发送,需要把MQ发送代码注释掉，反之则租掉下方websocket调用代码*/
try {
server.send(sendMsgVO.getScid(),sendMsgVO.getRcid(),sendMsgVO.getType(),sendMsgVO.getContent(),0);
msg.put("status",true);
} catch (IOException e) {
log.error(e);
msg.put("status",false);
}
return msg;
}
监听消息 --该方法最终要的功能发送消息给指定的用户，然后对消息进行消费，当用户不在线时（没有连接上websocket）消息不会消费，只有当用户在线时消息才会被消费。 该方法还需要在项目启动时就需要启动，有非常多方法可以做到，有兴趣可以去看一下，这儿使用的是springboot自带的@EventListener注解，该注解可监听到springboot启动后自动启动有@EventListener注解的方法
@EventListener
@Override
public void listenMsg(ContextRefreshedEvent event) {
try {
DefaultMQPushConsumer consumer = mqConsumer.consumer(MQTopic.FRIEND_MSG);
consumer.setConsumeFromWhere(ConsumeFromWhere.CONSUME_FROM_FIRST_OFFSET);
consumer.registerMessageListener((MessageListenerOrderly) (list, consumeOrderlyContext) -> {
consumeOrderlyContext.setAutoCommit(true);
//mq消费消息状态；ConsumeOrderlyStatus.SUCCESS - 成功消费 SUSPEND_CURRENT_QUEUE_A_MOMENT - 队列消息消费失败，持续等待消费者上线然后进行消费
ConsumeOrderlyStatus status = ConsumeOrderlyStatus.SUCCESS;
for (MessageExt msg : list) {
try {
Map<String,String> msgInfo = Transfer.mapStrToMap(new String(msg.getBody()));
int voiceLength = Objects.equals(msgInfo.get("type"), "voice") ? Integer.parseInt(msgInfo.get("voiceLength")) : 0;
//调用websocket发送消息方法，如果发送失败，证明用户不在线，所以消费消息失败
if (!server.send(Integer.parseInt(msgInfo.get("scid")), Integer.parseInt(msgInfo.get("rcid")), msgInfo.get("type"), msgInfo.get("content"),voiceLength)) {
status = ConsumeOrderlyStatus.SUSPEND_CURRENT_QUEUE_A_MOMENT;
}
TimeUnit.MILLISECONDS.sleep(100);
} catch (Exception e) {
status = ConsumeOrderlyStatus.SUSPEND_CURRENT_QUEUE_A_MOMENT;
log.error(e);
}
}
return status;
});
consumer.start();
} catch (Exception e) {
log.error(e);
}
}整个MessageService代码
package com.wm.service;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.wm.components.UploadFile;
import com.wm.dao.MessageDao;
import com.wm.entity.dto.GetChatMsgListDTO;
import com.wm.entity.po.ChatMsgRecordPO;
import com.wm.entity.vo.GetChatMsgVO;
import com.wm.entity.vo.SendMsgVO;
import com.wm.mq.MQConsumer;
import com.wm.mq.MQProducer;
import com.wm.mq.MQTopic;
import com.wm.tools.Time;
import com.wm.tools.Transfer;
import com.wm.webSocket.Server;
import jakarta.annotation.Resource;
import lombok.extern.log4j.Log4j2;
import org.apache.rocketmq.client.consumer.DefaultMQPushConsumer;
import org.apache.rocketmq.client.consumer.listener.ConsumeOrderlyContext;
import org.apache.rocketmq.client.consumer.listener.ConsumeOrderlyStatus;
import org.apache.rocketmq.client.consumer.listener.MessageListenerOrderly;
import org.apache.rocketmq.common.consumer.ConsumeFromWhere;
import org.apache.rocketmq.common.message.MessageExt;
import org.springframework.beans.BeanUtils;
import org.springframework.context.event.ContextRefreshedEvent;
import org.springframework.context.event.EventListener;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;
import java.io.IOException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Objects;
import java.util.concurrent.TimeUnit;
@Log4j2
@Service
public class MessageServiceImpl implements MessageService{
@Resource
private MessageDao messageDao;
@Resource
private MQProducer mqProducer;
@Resource
private MQConsumer mqConsumer;
@Resource
private Server server;
@Resource
private UploadFile uploadFile;
/**
* 获取聊天好友
* @param cid
* @return
*/
@Override
public List<GetChatMsgListDTO> getChatMsgList(int cid) {
return messageDao.getChatMsgList(cid);
}
/**
* 获取消息
* @param getChatMsgVO
* @return
*/
@Override
public Map<String,Object> getChatMsg(GetChatMsgVO getChatMsgVO) {
Map<String,Object> map = new HashMap<>();
PageHelper.startPage(getChatMsgVO.getPageNum(),getChatMsgVO.getPageSize());
PageInfo<ChatMsgRecordPO> info = new PageInfo<>(messageDao.getChatMsg(getChatMsgVO.getScid(), getChatMsgVO.getRcid()));
map.put("pagesNum",info.getPages());
map.put("totalNum",info.getTotal());
map.put("size",info.getSize());
map.put("list", info.getList());
return map;
}
/**
* 监听MQ消息
* @param event
*/
@EventListener
@Override
public void listenMsg(ContextRefreshedEvent event) {
try {
DefaultMQPushConsumer consumer = mqConsumer.consumer(MQTopic.FRIEND_MSG);
consumer.setConsumeFromWhere(ConsumeFromWhere.CONSUME_FROM_FIRST_OFFSET);
consumer.registerMessageListener((MessageListenerOrderly) (list, consumeOrderlyContext) -> {
consumeOrderlyContext.setAutoCommit(true);
ConsumeOrderlyStatus status = ConsumeOrderlyStatus.SUCCESS;
for (MessageExt msg : list) {
try {
Map<String,String> msgInfo = Transfer.mapStrToMap(new String(msg.getBody()));
int voiceLength = Objects.equals(msgInfo.get("type"), "voice") ? Integer.parseInt(msgInfo.get("voiceLength")) : 0;
if (!server.send(Integer.parseInt(msgInfo.get("scid")), Integer.parseInt(msgInfo.get("rcid")), msgInfo.get("type"), msgInfo.get("content"),voiceLength)) {
status = ConsumeOrderlyStatus.SUSPEND_CURRENT_QUEUE_A_MOMENT;
}
TimeUnit.MILLISECONDS.sleep(100);
} catch (Exception e) {
status = ConsumeOrderlyStatus.SUSPEND_CURRENT_QUEUE_A_MOMENT;
log.error(e);
}
}
return status;
});
consumer.start();
} catch (Exception e) {
log.error(e);
}
}
/**
* 发送消息
* @param sendMsgVO
* @return
*/
@Override
public Map<String,Object> sendMsg(SendMsgVO sendMsgVO) {
Map<String,Object> msg = new HashMap<>();
ChatMsgRecordPO chatMsgRecordPO = new ChatMsgRecordPO();
/*消息存入数据库*/
BeanUtils.copyProperties(sendMsgVO,chatMsgRecordPO);
messageDao.saveMsg(chatMsgRecordPO);
/*MQ消息实体类赋值*/
msg.put("id",chatMsgRecordPO.getId());
msg.put("scid",sendMsgVO.getScid());
msg.put("rcid",sendMsgVO.getRcid());
msg.put("content",sendMsgVO.getContent());
msg.put("type",sendMsgVO.getType());
msg.put("sendTime", Time.getDateTime());
/*消息通过MQ发送*/
try {
mqProducer.sendOrderMsg(MQTopic.FRIEND_MSG, sendMsgVO.getRcid(), msg);
msg.put("status",true);
} catch (Exception e) {
log.error(e);
msg.put("status",false);
}
/*不需要经过MQ中间件，直接调用websocket进行消息发送,需要把上面MQ发送代码注释掉*/
/* 直接调用websocekt发送消息 -- 不能和上面mq消息共存，不然消息会重复发送 */
// try {
// server.send(sendMsgVO.getScid(),sendMsgVO.getRcid(),sendMsgVO.getType(),sendMsgVO.getContent(),0);
// msg.put("status",true);
// } catch (IOException e) {
// log.error(e);
// msg.put("status",false);
// }
return msg;
}
/**
* 发送文件消息
* @param file
* @param scid
* @param rcid
* @param type
* @return
*/
@Override
public Map<String, Object> sendFileMsg(MultipartFile file, int scid, int rcid, String type, Integer voiceLength) {
Map<String,Object> msg = new HashMap<>();
/*上传文件获取文件url*/
Map<String,Object> res = uploadFile.doRemoteUpload(file,"/file/");
if ((boolean) res.get("status")) {
/*消息存入数据库*/
ChatMsgRecordPO chatMsgRecordPO = new ChatMsgRecordPO();
chatMsgRecordPO.setScid(scid);
chatMsgRecordPO.setRcid(rcid);
chatMsgRecordPO.setType(type);
chatMsgRecordPO.setContent(res.get("fileUrl").toString());
chatMsgRecordPO.setVoiceLength(voiceLength);
messageDao.saveMsg(chatMsgRecordPO);
/*MQ消息实体类赋值*/
msg.put("id",chatMsgRecordPO.getId());
msg.put("rcid",rcid);
msg.put("scid",scid);
msg.put("type",type);
msg.put("content",res.get("fileUrl"));
msg.put("voiceLength",voiceLength);
msg.put("sendTime", Time.getDateTime());
/*MQ消息发送消息*/
try {
mqProducer.sendOrderMsg(MQTopic.FRIEND_MSG, rcid, msg);
msg.put("status",true);
} catch (Exception e) {
log.error(e);
msg.put("status",false);
}
/*不需要经过MQ中间件，直接调用websocket进行消息发送,需要把上面MQ发送代码注释掉*/
/* 直接调用websocekt发送消息 -- 不能和上面mq消息共存，不然消息会重复发送 */
// try {
// server.send(scid,rcid,type,res.get("fileUrl"),voiceLength);
// msg.put("status",true);
// } catch (IOException e) {
// log.error(e);
// msg.put("status",false);
// }
} else {
msg.put("status",false);
}
return msg;
}
/**
* 已读消息
* @param scid
* @param rcid
* @return
*/
@Override
public boolean readMsg(int scid, int rcid) {
return messageDao.readMsg(scid,rcid);
}
}
三、前端代码
一、websocket
websocket.js 功能 -提供连接以及连接重试功能，当websocket断开连接时需要不断重试连接，因为我们使用的uniapp，所以需要使用uniapp自带websocket连接方法，当然也可以使用js的websocket连接方法，但是考虑到兼容性，所以还是使用uniapp自带websocket连接方法
import conf from "@/properties/index.js" //配置类，可自定义
class WebSocket {
constructor() {
this.isConnect = false;
this.timer;
this.connect();
}
/**
* 连接
*/
connect() {
uni.connectSocket({
url: `${conf.appConf.websocketUrl}/${uni.getStorageSync("cid")}`,
header: {
'content-type': 'application/json',
'Sec-WebSocket-Protocol': uni.getStorageSync('Authorization')
},
method: 'GET',
success() {
console.log("socket开始连接！");
},
fail() {
console.log("socket连接失败！");
}
});
this.onOpen();
this.onError();
this.onClose();
}
/**
* 连接
*/
onOpen() {
uni.onSocketOpen(res => {
console.log("监测到已连接上websocket");
this.isConnect = false;
})
}
/**
* 出错
*/
onError() {
uni.onSocketError(res => {
console.log("监测到连接websocket错误");
this.isConnect = true;
this.reConnect();
})
}
/**
* 关闭
*/
onClose() {
uni.onSocketClose(res => {
console.log("监测到连接websocket已关闭");
this.isConnect = true;
this.reConnect();
})
}
/**
* 重连
*/
reConnect() {
if (this.isConnect) {
clearTimeout(this.timer);
this.timer = setTimeout(() => {this.connect()},conf.appConf.webSocketRetryTimeOut);
}
}
}
export default new WebSocket();注意：websocket定义完成后需要在小程序启动时运行，但是因为需要鉴权，所以需要在鉴权后才能启用websocket，这儿我放在进入小程序首页时调用websocket，因为必须要鉴权成功才能进入小程序首页，可以根据实际情况引入
import '@/websocket/websocket';二、聊天页面
websocket消息监听方法，因为我们使用了uniapp自带的websocket方法，所以直接使用uni.onSocketMessage()方法监听消息
const listenMsg = () => {
uni.onSocketMessage((res)=>{
let resData = JSON.parse(res.data);
if (resData.rcid !== resData.scid)
data.msgInfoList.push(resData);
})
}整个聊天页面代码：
<template>
<view class="chat-index">
<scroll-view
id="scrollview"
class="scroll-style"
:style="{height: `${windowHeight - inputHeight}rpx`}"
scroll-y="true"
:scroll-top="conf.scrollTop"
@scrolltoupper="topRefresh"
@click="touchClose"
>
<view id="msglistview" class="chat-body">
<view v-for="item,index in data.msgInfoList" :key="index">
<!-- 消息发送时间 -->
<view class="time-box" v-if="item.showTime">
<view class="time-style">
<view>
{{ timeFormat(item.sendTime) }}
</view>
</view>
</view>
<!-- 自己 -->
<view class="item self" v-if="item.scid == userInfo.scid">
<!-- 文本消息 -->
<view class="content-text right" v-if="item.type=='text'">
{{item.content}}
</view>
<!-- 语音消息 -->
<view class="content-text right" v-else-if="item.type=='voice'">
<view style="display: flex;" @click="playSound(item.content)">
<text>{{ item.voiceLength }}''</text>
<image v-if="conf.playVoice" style="width: 42rpx;height: 42rpx;" src="../../static/icon/voice_play_on.png"/>
<image v-else style="width: 42rpx;height: 42rpx;" src="../../static/icon/voice_play.png"/>
</view>
</view>
<!-- 图片消息 -->
<view class="content-img" v-else-if="item.type=='img'">
<image class="img-style" :src="item.content" mode="widthFix" :lazy-load="true"/>
</view>
<!-- 视频消息 -->
<view class="content-video" v-else>
<video class="video-style" :src="item.content" />
</view>
<!-- 头像 -->
<image class="avatar" :src="userInfo.s_avatar" @click="toUserInfoPage(userInfo.scid)"/>
</view>
<!-- 好友 -->
<view class="item Ai" v-else>
<!-- 头像 -->
<image class="avatar" :src="userInfo.r_avatar" @click="toUserInfoPage(userInfo.rcid)"/>
<!-- 文本消息 -->
<view class="content-text left" v-if="item.type=='text'">
{{item.content}}
</view>
<!-- 语音消息 -->
<view class="content-text left" v-else-if="item.type=='voice'">
<view style="display: flex;" @click="playSound(item.content)">
<text>{{ item.voiceLength }}''</text>
<image v-if="conf.playVoice" style="width: 42rpx;height: 42rpx;" src="../../static/icon/voice_play_on.png"/>
<image v-else style="width: 42rpx;height: 42rpx;" src="../../static/icon/voice_play.png"/>
</view>
</view>
<!-- 图片消息 -->
<view class="content-img" v-else-if="item.type=='img'">
<image class="img-style" :src="item.content" mode="widthFix" :lazy-load="true"/>
</view>
<!-- 视频消息 -->
<view class="content-video" v-else>
<video class="video-style" :src="item.content" />
</view>
</view>
</view>
</view>
</scroll-view>
<!-- 消息发送框 -->
<view class="chat-bottom" :style="{height:`${inputHeight}rpx`}">
<view class="input-msg-box" :style="{bottom:`${conf.keyboardHeight}rpx`}">
<!-- 输入框区域 -->
<view class="textarea-style">
<!-- 语音/文字输入 -->
<view class="voice-btn" @click="isVoice">
<image class="icon-style" v-if="conf.isVoice" src="../../static/icon/keyboard.png" />
<image class="icon-style" v-else src="../../static/icon/voice.png" />
</view>
<!-- textarea输入框 -->
<view class="out_textarea_box" @click="() => conf.showMoreMenu=false">
<textarea
placeholder-class="textarea_placeholder"
:style="{textAlign:(conf.textAreaDisabled?'center':'')}"
v-model="sendMsg.text"
maxlength="250"
confirm-type="send"
auto-height
:placeholder="conf.textAreaText"
:show-confirm-bar="false"
:adjust-position="false"
:disabled="conf.textAreaDisabled"
@confirm="handleSend"
@linechange="listenTextAreaHeight"
@focus="scrollToBottom"
@blur="scrollToBottom"
@touchstart="handleTouchStart"
@touchmove="handleTouchMove"
@touchend="handleTouchEnd"
/>
</view>
<!-- 输入菜单 -->
<view class="more-btn">
<image class="icon-style" src="../../static/icon/emoji.png" @click="handleSend"/>
<image class="icon-style" style="margin-left: 20rpx;" src="../../static/icon/more.png" @click="showMoreMenuFunc"/>
</view>
</view>
<!-- 更多菜单 -->
<view :class="{'more-menu-box-max': conf.showMoreMenu,'more-menu-box-min': !conf.showMoreMenu}">
<view class="inner-menu-box">
<view class="menu-box" @click="sendFile('choose','')">
<view class="out-icon-area">
<image class="i-style" src="../../static/icon/photo.png" />
</view>
<view class="t-style">照片</view>
</view>
<view class="menu-box" @click="sendFile('shoot','')">
<view class="out-icon-area">
<image class="i-style" src="../../static/icon/takePhoto.png" />
</view>
<view class="t-style">拍摄</view>
</view>
</view>
</view>
</view>
</view>
<!-- 语音输入 -->
<view class="voice-mask" v-show="voice.mask">
<view class="inner-mask">
<view class="voice-progress-box" :style="{width:`${progressNum}`+'rpx'}">
<view class="third-icon"/>
<view class="progress-num">
{{ voice.length }}s
</view>
</view>
<view class="cancel-btn" :class="{cancelBtn : voice.cancel}">
<image style="width: 60rpx;height: 60rpx;" src="../../static/icon/cancel-voice.png"></image>
</view>
<view class="show-tips">
上滑取消发送
</view>
<view class="bottom-area">
<image class="img-style" src="../../static/icon/icon-voice.png" />
</view>
</view>
</view>
</view>
</template>
<script setup>
import { computed, getCurrentInstance, reactive, ref, onUpdated } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import properties from '@/properties/index.js';
import timeMethod from '@/utils/timeMethod.js';
const { proxy } = getCurrentInstance();
const _this = proxy;
const sendMsg = reactive({
text: ''
})
/* 接口数据 */
const data = reactive({
msgInfoList: [],
pageNum: 1,
pageSize: 20,
pageNumCount: 0
})
/* 用户信息 */
const userInfo = reactive({
scid: null,
rcid: null,
s_avatar: '',
r_avatar: ''
})
/* 配置项 */
const conf = reactive({
keyboardHeight: 0,
bottomHeight: 150,
scrollTop: 0,
moreMenuHeight: 0,
judgeScrollToBottom: true,
showMoreMenu: false,
loading: false,
showMsgMenuBoxId: null,
showMoreMenu: false,
textAreaDisabled: false,
textAreaText: '',
isVoice: false,
showMoreMenu: false,
playVoice: false
})
/* 语音输入配置项 */
const voice = reactive({
mask: false,
length: 0,
cancel: false,
startX: "",
startY: "",
timer: "",
recordInstance: "",
finished: false,
})
/* msg配置项 */
const msgConf = reactive({
timeSpace: 120,
initMsgTime: '',
msgId: 0,
latestTime: ''
})
/**
* 页面加载时调用
*/
onLoad((e) => {
userInfo.scid =parseInt(uni.getStorageSync('cid'));
userInfo.rcid = parseInt(e.rcid);
voice.recordInstance = uni.getRecorderManager();
keyboardHeightChange();
listenMsg();
getAiUserInfo(parseInt(e.rcid));
getSelfUserInfo(uni.getStorageSync('cid'));
getAllMsg(parseInt(e.rcid));
readMsg(parseInt(e.rcid))
})
/**
* 数据更新时调用
*/
onUpdated(() => {
/* 页面更新时调用聊天消息定位到最底部 */
if (conf.judgeScrollToBottom) scrollToBottom();
})
/**
* 计算属性
*/
const windowHeight = computed(() => rpxTopx(uni.getSystemInfoSync().windowHeight))
const inputHeight = computed(() => conf.bottomHeight + conf.keyboardHeight + conf.moreMenuHeight)
const progressNum = computed(() => voice.length * 2 + 250)
/**
* px 转换 rpx
*/
const rpxTopx = (px) => {
const deviceWidth = uni.getSystemInfoSync().windowWidth;
let rpx = ( 750 / deviceWidth ) * Number(px);
return Math.floor(rpx);
}
/**
* 监听聊天发送栏高度
*/
const listenTextAreaHeight = () => {
setTimeout(()=>{
let query = uni.createSelectorQuery();
query.select('.input-msg-box').boundingClientRect();
query.exec(res =>{
conf.bottomHeight = rpxTopx(res[0].height);
})
},200)
}
/**
* 监听键盘高度
*/
const keyboardHeightChange = () => {
uni.onKeyboardHeightChange(res => {
conf.keyboardHeight = rpxTopx(res.height);
if(conf.keyboardHeight <= 0) {
conf.keyboardHeight = 0;
conf.showMoreMenu = false;
}
})
}
/**
* 滑动到底部
*/
const scrollToBottom = (e) => {
setTimeout(()=>{
let query = uni.createSelectorQuery().in(_this);
query.select('#scrollview').boundingClientRect();
query.select('#msglistview').boundingClientRect();
query.exec((res) =>{
if(res[1].height > res[0].height){
conf.scrollTop = rpxTopx(res[1].height - res[0].height);
}
})
},200);
}
/**
* 弹出更多菜单弹窗
*/
const showMoreMenuFunc = () => {
conf.showMoreMenu = true;
conf.isVoice = false;
conf.textAreaText = '';
conf.moreMenuHeight = 350;
}
/**
* websocket监听
*/
const listenMsg = () => {
uni.onSocketMessage((res)=>{
let resData = JSON.parse(res.data);
if (resData.rcid !== resData.scid)
data.msgInfoList.push(resData);
})
}
/**
* 语音与输入切换
*/
const isVoice = () => {
if (conf.isVoice) {
conf.isVoice = false;
conf.textAreaDisabled = false;
conf.textAreaText = '';
} else {
conf.isVoice = true;
conf.textAreaDisabled = true;
conf.textAreaText = '按住 说话';
conf.showMoreMenu = false;
conf.moreMenuHeight = 0;
}
}
/**
* 获取用户信息（自己）
*/
const getSelfUserInfo = (cid) => _this.$http('/user/getUserInfo','GET',{'cid':cid}).then(res => {
userInfo.scid = cid;
userInfo.s_avatar = res.data.avatarUrl;
})
/**
* 获取用户信息（好友）
*/
const getAiUserInfo = (cid) => _this.$http('/user/getUserInfo','GET',{'cid':cid}).then(res => {
userInfo.rcid = cid;
userInfo.r_avatar = res.data.avatarUrl;
uni.setNavigationBarTitle({title:res.data.name});
})
/**
* 进入好友信息页面
*/
const toUserInfoPage = (cid) => {
uni.navigateTo({
url: `/pages/user/friendUserInfo?cid=${cid}`
})
}
/**
* 上拉加载消息
*/
const topRefresh = () => {
if (data.pageNum < data.pageNumCount) {
data.pageNum++;
conf.judgeScrollToBottom = false;
conf.loading = true;
getAllMsg(userInfo.rcid);
}
}
/**
* 获取消息
*/
const getAllMsg = (rcid) => {
_this.$http('/msg/getChatMsg','POST',{'scid':uni.getStorageSync('cid'),'rcid':rcid,'pageNum':data.pageNum,'pageSize':data.pageSize}).then(res => {
data.pageNumCount = res.data.pagesNum;
showMsgTime(res.data.list);
if (data.msgInfoList.length !== 0)
msgConf.latestTime = data.msgInfoList.slice(-1)[0].sendTime;
})
}
/**
* 已读消息
*/
const readMsg = (rcid) => {
_this.$http('/msg/readMsg','POST',{'scid':rcid,'rcid':uni.getStorageSync('cid')})
}
/**
* 控制消息时间是否展示
*/
const showMsgTime = (msgData) => {
msgData.forEach(e => {
e.showTime = false;
data.msgInfoList.unshift(e);
if (msgConf.msgId !== 0) {
if (timeMethod.calculateTime(msgConf.initMsgTime,e.sendTime)/1000 > msgConf.timeSpace) {
data.msgInfoList.slice(0 - msgConf.msgId)[0].showTime = true;
}
}
msgConf.initMsgTime = e.sendTime;
msgConf.msgId++;
});
if (data.msgInfoList.length !== 0)
data.msgInfoList.slice(0 - (msgConf.msgId + 1))[0].showTime = true;
}
/**
* 日期转换
*/
const timeFormat = (time) => {
//时间格式化
const Time = timeMethod.getTime(time).split("T");
//当前消息日期属于周
const week = timeMethod.getDateToWeek(time);
//当前日期0时
const nti = timeMethod.setTimeZero(timeMethod.getNowTime());
//消息日期当天0时
const mnti = timeMethod.setTimeZero(timeMethod.getTime(time));
//计算日期差值
const diffDate = timeMethod.calculateTime(nti,mnti);
//本周一日期0时 （后面+1是去除当天时间）
const fwnti = timeMethod.setTimeZero(timeMethod.countDateStr(-timeMethod.getDateToWeek(timeMethod.getNowTime()).weekID + 1));
//计算周日期差值
const diffWeek = timeMethod.calculateTime(mnti,fwnti);
if (diffDate === 0) { //消息发送日期减去当天日期如果等于0则是当天时间
return Time[1].slice(0,5);
} else if (diffDate < 172800000) { //当前日期减去消息发送日期小于2天（172800000ms）则是昨天- 一天最大差值前天凌晨00:00:00到今天晚上23:59:59
return "昨天 " + Time[1].slice(0,5);
} else if (diffWeek >= 0) { //消息日期减去本周一日期大于0则是本周
return week.weekName;
} else { //其他时间则是日期
return Time[0].slice(5,10);
}
}
/**
* 关闭消息操作菜单
*/
const touchClose = () => {
conf.showBoxId = null;
conf.showMoreMenu = false;
conf.keyboardHeight = 0;
conf.moreMenuHeight = 0;
}
/**
* 发送消息
*/
const handleSend = () => {
conf.judgeScrollToBottom = true;
data.pageNum = 1;
/* 如果消息不为空 */
if(sendMsg.text.length !== 0){
_this.$http("/msg/sendMsg","POST",{
"scid":userInfo.scid,
"rcid":userInfo.rcid,
"type": "text",
"content":sendMsg.text}).then(res => {
if (res.status) {
if (timeMethod.calculateTime(res.data.sendTime,msgConf.latestTime)/1000 > msgConf.timeSpace) {
res.data.showTime = true;
} else {
res.data.showTime = false;
}
data.msgInfoList.push(res.data);
sendMsg.text = '';
}
})
}
}
/**
* 长按开始录制语音
*/
const handleTouchStart = (e) => {
if (conf.textAreaDisabled) {
voice.finished = false;
uni.getSetting({
success(res) {
if (res.authSetting['scope.record'] === undefined) {
console.log("第一次授权")
} else if (!res.authSetting['scope.record']) {
uni.showToast({
icon: "none",
title: "点击右上角···进入设置开启麦克风授权！",
duration: 2000
})
} else {
voice.recordInstance.start();
voice.mask = true;
voice.isRecord = true;
voice.length = 1;
voice.startX = e.touches[0].pageX;
voice.startY = e.touches[0].pageY;
voice.timer = setInterval(() => {
voice.length += 1;
if(voice.length >= 60) {
clearInterval(voice.timer);
handleTouchEnd();
}
},1000)
//判断先结束按钮但是录制才开始时不会结束录制的条件；因为获取授权这儿存在延时；所以结束录制时可能还没开始录制
if (voice.finished && voice.mask) {
handleTouchEnd();
}
}
}
})
}
}
/**
* 长按滑动
*/
const handleTouchMove = (e) => {
if (conf.textAreaDisabled) {
if (voice.startY - e.touches[0].pageY > 80) {
voice.cancel = true;
}else {
voice.cancel = false;
}
}
}
/**
* 语音录制结束
*/
const handleTouchEnd = () => {
if (conf.textAreaDisabled) {
voice.finished = true;
voice.mask = false;
clearInterval(voice.timer);
voice.recordInstance.stop();
voice.recordInstance.onStop((res) => {
const message = {
voice:res.tempFilePath,
length:voice.length
}
if (!voice.cancel) {
if (voice.length>1) {
sendFile("voice",message);
} else {
uni.showToast({
icon: 'none',
title: "语音时间太短",
duration: 1000
})
}
}else {
voice.cancel = false;
}
})
}
}
/**
* 语音播放
*/
const playSound = (url) => {
conf.playVoice = true;
let music = null;
music = uni.createInnerAudioContext();
music.src = url;
music.play();
music.onEnded(()=>{
music = null;
conf.playVoice = false;
})
}
/**
* 发送文件
*/
const sendFile = (type,data) => {
if (type === "choose") {
uni.chooseMedia({
count: 1,
mediaType: ['image', 'video'],
sourceType: ['album'],
maxDuration: 30,
success(res) {
let type = 'img';
if (res.tempFiles[0].fileType === 'image') {
type = 'img'
} else {
type = 'video'
}
uploadFile(res.tempFiles[0].tempFilePath,type)
}
})
} else if (type === "shoot") {
uni.chooseMedia({
count: 1,
mediaType: ['image', 'video'],
sourceType: ['camera'],
maxDuration: 30,
success(res) {
let type = 'img';
if (res.tempFiles[0].fileType === 'image') {
type = 'img'
} else {
type = 'video'
}
uploadFile(res.tempFiles[0].tempFilePath,type)
}
})
} else {
uploadFile(data.voice,'voice')
}
}
/**
* 上传文件
*/
const uploadFile = (path,type) => {
let param = {"scid":userInfo.scid,"rcid":userInfo.rcid,"type":type};
if (type=='voice') {
param = {"scid":userInfo.scid,"rcid":userInfo.rcid,"type":type,"voiceLength":voice.length};
}
uni.uploadFile({
url: properties.appConf.url + "/msg/sendFileMsg",
filePath: path,
name: 'file',
formData: param,
header: {"Authorization": uni.getStorageSync('Authorization')},
success(res) {
let newMsg = JSON.parse(res.data)
if (newMsg.status) {
if (timeMethod.calculateTime(newMsg.data.sendTime,msgConf.latestTime)/1000 > msgConf.timeSpace) {
newMsg.data.showTime = true;
} else {
newMsg.data.showTime = false;
}
data.msgInfoList.push(newMsg.data)
}
}
})
}
</script>
<style lang="scss">
$chatContentbgc: #00ff7f;
$chatBackground: #f0f0f0;
center {
display: flex;
align-items: center;
justify-content: center;
}
.chat-index {
height: 100vh;
background-color: $chatBackground;
.scroll-style {
.chat-body {
display: flex;
flex-direction: column;
padding-top: 23rpx;
.time-box {
width: 100%;
height: 100rpx;
display: flex;
justify-content: center;
align-items: center;
.time-style {
font-size: 22rpx;
background-color: rgba(213, 213, 213, 0.3);;
padding: 5rpx 10rpx;
border-radius: 8rpx;
color: black;
}
}
.self {
justify-content: flex-end;
position: relative;
}
.Ai {
position: relative;
}
.item {
display: flex;
padding: 23rpx 30rpx;
.right {
background-color: $chatContentbgc;
}
.left {
background-color: #FFFFFF;
}
.right::after {
position: absolute;
display: inline-block;
content: '';
width: 0;
height: 0;
left: 100%;
top: 10px;
border: 12rpx solid transparent;
border-left: 12rpx solid $chatContentbgc;
}
.left::after {
position: absolute;
display: inline-block;
content: '';
width: 0;
height: 0;
top: 10px;
right: 100%;
border: 12rpx solid transparent;
border-right: 12rpx solid #FFFFFF;
}
.content-text {
position: relative;
max-width: 486rpx;
border-radius: 8rpx;
word-wrap: break-word;
padding: 24rpx 24rpx;
margin: 0 24rpx;
border-radius: 5px;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
line-height: 42rpx;
}
.content-img {
margin: 0 24rpx;
}
.content-video {
margin: 0 24rpx;
}
.img-style {
width: 400rpx;
height: auto;
border-radius: 10rpx;
}
.video-style {
width: 400rpx;
height: 400rpx;
}
.avatar {
display: flex;
justify-content: center;
width: 78rpx;
height: 78rpx;
background: #fff;
border-radius: 50rpx;
overflow: hidden;
image {
align-self: center;
}
}
}
}
}
.chat-bottom {
width: 100%;
.input-msg-box {
width: 100% ;
min-height: 150rpx;
position: fixed;
bottom: 0;
background: #e6e6e6;
.textarea-style {
width: 100%;
padding-top: 20rpx;
display: flex;
.out_textarea_box {
width:65%;
min-height: 70rpx;
border-radius: 10rpx;
margin-left: 10rpx;
background: #f0f0f0;
display: flex;
align-items: center;
textarea {
width: 94%;
padding: 0 3%;
min-height: 42rpx;
max-height: 200rpx;
font-size: 32rpx;
font-family: PingFang SC;
color: #333333;
}
}
.voice-btn {
width: 10%;
@extend center;
}
.more-btn {
width: calc(25% - 25rpx);
margin-left: 10rpx;
@extend center;
}
.icon-style {
width: 50rpx;
height: 50rpx;
}
}
.more-menu-box-min {
width: 100%;
height: 0rpx;
display: none;
}
.more-menu-box-max {
height: 400rpx;
margin-top: 10rpx;
border-top: 1rpx solid #d6d6d6;
transition: height 1ms linear;
display: block;
.inner-menu-box {
width: calc(100% - 20rpx);
height: calc(360rpx - 10rpx);
padding: 10rpx;
.menu-box {
width: 150rpx;
height: 150rpx;
margin: 12rpx calc((100% - 600rpx) / 8);
float: left;
.out-icon-area {
width: 110rpx;
height: 110rpx;
background-color: #fff;
border-radius: 20rpx;
margin: 0 20rpx;
@extend center;
.i-style {
width: 60rpx;
height: 60rpx;
}
}
.t-style {
font-size: 24rpx;
font-weight: 400;
text-align: center;
margin-top: 10rpx;
color: #717171;
}
}
}
}
}
}
.voice-mask{
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
background-color: rgba(0,0,0,0.8);
.inner-mask {
display: flex;
flex-direction: column;
align-items: center;
.voice-progress-box {
min-width: 250rpx;
height: 150rpx;
margin-top: 60%;
border-radius: 50rpx;
background: #4df861;
position: relative;
@extend center;
.third-icon {
width: 0;
height: 0;
border: 15rpx solid transparent;
border-top: 15rpx solid #4df861;
position: absolute;
top: 100%;
left: 45%;
.progress-num {
font-size: 50rpx;
font-weight: 600;
}
}
}
.cancel-btn {
width: 120rpx;
height: 120rpx;
clip-path: circle();
margin-top: 50%;
background: #080808;
@extend center;
}
.cancelBtn {
width: 150rpx;
height: 150rpx;
background-color: #ff0004;
}
.show-tips {
width: 100%;
margin-top: 50rpx;
text-align: center;
color: white;
animation: 4s opacity2 1s infinite;
font-size: 30rpx;
font-weight: 400;
font-family: sans-serif;
}
@keyframes opacity2{
0%{opacity:0}
50%{opacity:.8;}
100%{opacity:0;}
}
.bottom-area {
position: fixed;
bottom: 0rpx;
width: 100%;
height:190rpx;
border-top: #BABABB 8rpx solid;
border-radius: 300rpx 300rpx 0 0;
background-image: linear-gradient(#949794,#e1e3e1);
@extend center;
.img-style {
width: 50rpx;
height: 50rpx;
}
}
}
}
}
</style>
实际效果图：
主要代码就是这样，整个项目也已上传到资源模块，感兴趣可下载查看
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
32
0- 0
已为社区贡献3条内容
所有评论(0)