系列文章目录
文章目录
前言
上一章主要搭建了基础服务的使用,可以简单的进行通信,本章结合前端项目进行仿微信网页版开发,主要进行开发方案,数据库设计,代码部分讲解,前端vue项目使用,感谢网上的前端大佬开源的vue仿微信项目:GitHub - han960619/Vue-chat: 仿wechatPC版
体验地址:wechat
测试账户:18200891282/123456,18200891283/123456
小服务器速度不开,大家手下留情
效果图:
登录页面
聊天列表和单聊页面:
好友列表+搜索新好友
一、开发方案
- 前后端交互采用api接口+websocket进行数据交流
- 用户体系权限采用简单的redis+jwt,gateway全局接口鉴权和内部接口限制
- 服务间交流采用fegin+nacos+gatway
- 使用spring boot +mybatisplus
- nacos统一管理服务配置
二、用户模块开发
1.简单登录,采用手机验证码登录,接入阿里云的短信服务功能
创建用户信息表:`chat_user_info ,创建用户id,手机号码索引
CREATE TABLE `chat_user_info` (
`id` int NOT NULL AUTO_INCREMENT COMMENT '自增id',
`user_id` bigint NOT NULL COMMENT '用户id',
`nick_name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL DEFAULT '' COMMENT '昵称',
`phone` varchar(255) NOT NULL COMMENT '手机号码',
`img` varchar(512) NOT NULL COMMENT '头像',
`sex` bigint DEFAULT '0' COMMENT '性别 0:男 1:女',
`address` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT '' COMMENT '地区',
`wx_number` varchar(50) NOT NULL COMMENT '自定义账号',
`create_time` datetime NOT NULL COMMENT '创建时间',
`update_time` datetime NOT NULL COMMENT '更新时间',
`is_delete` bigint NOT NULL DEFAULT '0' COMMENT '是否删除 0:未删除,1:删除',
PRIMARY KEY (`id`),
KEY `idx_user_id` (`user_id`) USING BTREE,
KEY `idx_user_phone` (`phone`) USING BTREE,
KEY `idx_user_wx_number` (`wx_number`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
2.封装阿里云短信验证码工具类
大家可以自行去阿里云申请这个服务,一条短信也很便宜,不接入可以缓存写死验证码供使用
@Component
@Slf4j
public class MsmSendUtil {
@Resource
private RedisService redisService;
@Value("${aliyuncs.accessKeyId}")
private String accessKeyId;
@Value("${aliyuncs.secret}")
private String secret;
@Value("${aliyuncs.signName}")
private String signName;
@Value("${aliyuncs.templateCode}")
private String templateCode;
public boolean sendMsm(String phone) {
if (StringUtils.isEmpty(phone)) {
return false;
}
Object o = redisService.get(String.format(BaseConstant.MSM_PHONE_CODE_KEY, phone));
if(o!=null){
return true;
}
DefaultProfile profile =
DefaultProfile.getProfile("default", accessKeyId, secret);
IAcsClient client = new DefaultAcsClient(profile);
CommonRequest request = new CommonRequest();
request.setMethod(MethodType.POST);
request.setDomain("dysmsapi.aliyuncs.com");
request.setVersion("2017-05-25");
request.setAction("SendSms");
Map<String, Object> param = new HashMap<>();
String code = RandomUtil.getFourBitRandom();
param.put("code", code);
request.putQueryParameter("PhoneNumbers", phone);
request.putQueryParameter("SignName", signName);
request.putQueryParameter("TemplateCode", templateCode);
request.putQueryParameter("TemplateParam", JSONObject.toJSONString(param));
try {
CommonResponse response = client.getCommonResponse(request);
boolean success = response.getHttpResponse().isSuccess();
if(success){
redisService.set(String.format(BaseConstant.MSM_PHONE_CODE_KEY, phone),code,15*60);
}
return success;
} catch (Exception e) {
log.error("发送短信失败:手机号码:{}",phone,e);
}
return false;
}
3.前端api请求头,根据token获取用户信息
- 在用户获取验证码登录后,自定义请求头X-WEB-TOKEN返回JWT生成的token,后续请求均携带该请求头
- 新增根据token获取用户信息的接口,退出登录清除登录态
- 用户信息缓存2小时
基础的用户接口暂时这么多满足现有的场景,简单的逻辑就不详讲
三、gateway鉴权,统一系统异常返回
目前系统没有细化权限,所以通过简单的uri规则进行鉴权
- 需要登录后使用的接口统一前缀含有/auth
- 内部服务接口统一前缀含有/inner
自定义全局filter类,实现GlobalFilter, Ordered,重写filter方法,根据uri判读权限和获取请求头的token校验登录态
@Component
@Slf4j
public class AuthGlobalFilter implements GlobalFilter, Ordered {
private AntPathMatcher antPathMatcher = new AntPathMatcher();
@Autowired
private RedisTemplate<String, String> redisTemplate;
@Override
public Mono<Void> filter(ServerWebExchange exchange, GatewayFilterChain chain) {
ServerHttpRequest request = exchange.getRequest();
String path = request.getURI().getPath();
log.info("请求路径为:{}",path);
List<String> tokenList = request.getHeaders().get(BaseConstant.HEADER_TOKEN_KEY);
if (antPathMatcher.match("/**/auth/**", path)) {
if (null == tokenList) {
ServerHttpResponse response = exchange.getResponse();
return out(response);
} else {
log.info("接口鉴权token为:{}",tokenList.get(0) );
if(!redisTemplate.hasKey(String.format(BaseConstant.USER_LOGIN_SUCCESS,tokenList.get(0)))){
ServerHttpResponse response = exchange.getResponse();
return out(response);
}
}
}
//内部服务接口,不允许外部访问
if (antPathMatcher.match("/**/inner/**", path)) {
ServerHttpResponse response = exchange.getResponse();
return out(response);
}
return chain.filter(exchange);
}
@Override
public int getOrder() {
return 0;
}
private Mono<Void> out(ServerHttpResponse response) {
JsonObject message = new JsonObject();
message.addProperty("success", false);
message.addProperty("code", ErrorMessage.TOKEN_IS_NOT_VALIDATE.getErrorCode());
message.addProperty("data", ErrorMessage.TOKEN_IS_NOT_VALIDATE.getMessage());
byte[] bits = message.toString().getBytes(StandardCharsets.UTF_8);
DataBuffer buffer = response.bufferFactory().wrap(bits);
response.getHeaders().add("Content-Type", "application/json;charset=UTF-8");
return response.writeWith(Mono.just(buffer));
}
}
自定义全局异常处理器,继承DefaultErrorWebExceptionHandler,重写getErrorAttributes方法,还需进行全局视图和Server配置该自定义异常处理器
public class JsonExceptionHandler extends DefaultErrorWebExceptionHandler {
public JsonExceptionHandler(ErrorAttributes errorAttributes, ResourceProperties resourceProperties,
ErrorProperties errorProperties, ApplicationContext applicationContext) {
super(errorAttributes, resourceProperties, errorProperties, applicationContext);
}
/**
* 获取异常属性
*/
@Override
protected Map<String, Object> getErrorAttributes(ServerRequest request, boolean includeStackTrace) {
Map<String, Object> map = new HashMap<>();
map.put("success", false);
map.put("code", 20005);
map.put("message", "系统异常,请稍后再试");
map.put("data", null);
return map;
}
/**
* 指定响应处理方法为JSON处理的方法
* @param errorAttributes
*/
@Override
protected RouterFunction<ServerResponse> getRoutingFunction(ErrorAttributes errorAttributes) {
return RouterFunctions.route(RequestPredicates.all(), this::renderErrorResponse);
}
/**
* 根据code获取对应的HttpStatus
* @param errorAttributes
* @return
*/
@Override
protected int getHttpStatus(Map<String, Object> errorAttributes) {
return 200;
}
}
@Configuration
@EnableConfigurationProperties({ServerProperties.class, ResourceProperties.class})
public class ErrorHandlerConfig {
private final ServerProperties serverProperties;
private final ApplicationContext applicationContext;
private final ResourceProperties resourceProperties;
private final List<ViewResolver> viewResolvers;
private final ServerCodecConfigurer serverCodecConfigurer;
public ErrorHandlerConfig(ServerProperties serverProperties,
ResourceProperties resourceProperties,
ObjectProvider<List<ViewResolver>> viewResolversProvider,
ServerCodecConfigurer serverCodecConfigurer,
ApplicationContext applicationContext) {
this.serverProperties = serverProperties;
this.applicationContext = applicationContext;
this.resourceProperties = resourceProperties;
this.viewResolvers = viewResolversProvider.getIfAvailable(Collections::emptyList);
this.serverCodecConfigurer = serverCodecConfigurer;
}
@Bean
@Order(Ordered.HIGHEST_PRECEDENCE)
public ErrorWebExceptionHandler errorWebExceptionHandler(ErrorAttributes errorAttributes) {
JsonExceptionHandler exceptionHandler = new JsonExceptionHandler(
errorAttributes,
this.resourceProperties,
this.serverProperties.getError(),
this.applicationContext);
exceptionHandler.setViewResolvers(this.viewResolvers);
exceptionHandler.setMessageWriters(this.serverCodecConfigurer.getWriters());
exceptionHandler.setMessageReaders(this.serverCodecConfigurer.getReaders());
return exceptionHandler;
}
}
四、单聊天模块开发
1.聊天模块相关表
chat_friend:用户关系表
CREATE TABLE `chat_friend` (
`id` int NOT NULL AUTO_INCREMENT COMMENT '自增id',
`biz_id` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '业务id',
`user_id` bigint NOT NULL COMMENT '用户id',
`friend_id` bigint NOT NULL COMMENT '好友id',
`is_top` bigint NOT NULL DEFAULT '0' COMMENT '是否置顶 0:否 1:是',
`not_receive_message` bigint NOT NULL DEFAULT '0' COMMENT '是否消息免打扰 0:否 1:是',
`remark` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL DEFAULT '' COMMENT '好友备注',
`apply_reason` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT '' COMMENT '申请填写内容',
`is_pass` bigint NOT NULL DEFAULT '0' COMMENT '是否申请通过 0:否 1:是',
`create_time` datetime DEFAULT NULL COMMENT '创建时间',
`update_time` datetime DEFAULT NULL COMMENT '更新时间',
`is_delete` bigint NOT NULL DEFAULT '0' COMMENT '是否删除 0:否 1:是',
PRIMARY KEY (`id`),
KEY `idx_user_id` (`user_id`) USING BTREE,
KEY `idx_biz_id` (`biz_id`) USING BTREE,
KEY `idx_friend_id` (`friend_id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=23 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
chat_list:用户聊天列表
CREATE TABLE `chat_list` (
`id` int NOT NULL AUTO_INCREMENT,
`user_id` bigint NOT NULL COMMENT '用户id',
`friend_id` bigint NOT NULL COMMENT '好友id',
`message_id` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT '' COMMENT '消息id',
`create_time` datetime DEFAULT NULL COMMENT '创建时间',
`update_time` datetime DEFAULT NULL COMMENT '更新时间',
`is_delete` bigint NOT NULL DEFAULT '0' COMMENT '是否删除 0:否 1:是',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=24 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
chat_message:用户消息信息表
CREATE TABLE `chat_message` (
`id` int NOT NULL AUTO_INCREMENT COMMENT '自增id',
`message_id` varchar(64) NOT NULL COMMENT '消息id',
`message_type` bigint NOT NULL COMMENT '消息类型( 1:添加新好友 2:好友申请通过 3:获取聊天列表 4:获取历史聊天列表 5:单聊文本 6:群聊文本)',
`message_data` text COMMENT '消息内容(自定义json格式)',
`user_id` bigint NOT NULL COMMENT '发送用户userId',
`receive_id` bigint NOT NULL COMMENT '接收用户id 或者 群聊分组id',
`create_time` datetime NOT NULL COMMENT '创建时间',
`update_time` datetime NOT NULL COMMENT '更新时间',
`is_delete` bigint NOT NULL DEFAULT '0' COMMENT '是否删除 0:未删除,1:删除',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=117 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
2.Http Api +Websocket 接口混合开放
既然用到了websocket进行通信,所以有些数据就使用websocket进行交流。也为了划分服务的责任。
用户的好友关系采用api接口开发,关于实时的用户聊天数据例如用户发送聊天,动态聊天列表,新数据通知采用Websocket开发
上一章已经讲过用户连接websocket后如何绑定通道和多节点通信:
- 这里的api接口就不详细讲了,主要是获取用户的好友列表,搜索新好友,添加好友接口
重点讲一下Webscoket和前端的通信流程:
- 定义通信标准的数据格式json,定义每种动作的标识
- 采用策略+工厂设计模式优化if-else判断需要处理的handler
- 前端vue采用store进行页面间的通信,websocket挂载windows下
- netty服务提供内部api推送实时消息
定义固定的数据通信VO
@Data
public class NettyMessageVO {
/**
* 发送者id
* */
@JSONField(serializeUsing= ToStringSerializer.class)
private Long userId;
/**
* 接受者id
* */
@JSONField(serializeUsing= ToStringSerializer.class)
private Long receiveId;
/**
* 消息类型
* */
private Integer messageType;
/**
* 消息id
* */
private String messageId;
/**
* 消息内容
* */
private String data;
/**
* 消息类型为图片
* */
private String img;
/**
* 通道id
* */
private Object channelId;
private Integer pageNo;
private Integer pageSize;
private String nickName;
private String myImg;
}
策略模式+工厂模式使用:
AbstractHandle抽象处理器,包含抽象的handler处理类标识,处理方法
public interface AbstractHandle {
/**
* 获取类bean名
* */
String getServiceTypeName();
/**
* 具体业务处理
* */
Object handlerWebsocket(ChannelHandlerContext ctx,Object message) throws UnknownHostException;
}
HandlerServiceFactory处理器工厂类,服务初始化加载处理实现类到工厂类的map统一管理,根据实现类自定义map中的key实现类名
public class HandlerServiceFactory {
private static Map<String, AbstractHandle> serviceMap = new ConcurrentHashMap<String, AbstractHandle>();
public static AbstractHandle getHandlerService(String serviceName){
return serviceMap.get(serviceName);
}
public static void register(String serviceName,AbstractHandle abstractHandle){
Assert.notNull(serviceName,"实现类名不允许为空");
serviceMap.put(serviceName,abstractHandle);
}
}
具体实现操作实现AbstractHandle,InitializingBean:
SignleMessageHandlerImpl,通过getServiceTypeName()设置加载到map中的key名,通过实现InitializingBean下的afterPropertiesSet方法将类初始化到HandlerServiceFactory中
@Service
@Slf4j
public class SignleMessageHandlerImpl implements AbstractHandle, InitializingBean {
@Autowired
private ChatMessageService chatMessageService;
@Autowired
private SendMessage sendMessage;
@Override
public String getServiceTypeName() {
return HandlerServiceName.SINGLE_MESSAGE.getName();
}
@Override
public Object handlerWebsocket(ChannelHandlerContext ctx, Object message) throws UnknownHostException {
NettyMessageVO nettyMessageVO = (NettyMessageVO)message;
//新增消息记录
nettyMessageVO = chatMessageService.addNewMessage(nettyMessageVO);
sendMessage.send(ctx,nettyMessageVO,Boolean.FALSE);
return null;
}
@Override
public void afterPropertiesSet() throws Exception {
HandlerServiceFactory.register(getServiceTypeName(),this);
}
}
定义HandlerServiceName和NettyMessageType枚举来管理处理类名和对应前端请求处理的标识ytpe:
@Getter
public enum NettyMessageType {
ADD_FRIEND(1,"添加好友消息","add_friend"),
ADD_FRIEND_FISH(2,"好友申请成功","add_friend"),
CURRENT_FRIEND_CHAT_LIST(3,"获取好友聊天列表","current_cha_list"),
FRIEND_CHAT_MESSAGE(4,"获取历史聊天列表","friend_chat_message"),
SINGLE_MESSAGE(5,"单聊","single_message"),
ADD_CHAT_LIST(7,"聊天列表添加","add_chat_list"),
;
public Integer type;
public String message;
public String handleName;
NettyMessageType(Integer type,String message,String handleName){
this.type = type;
this.message = message;
this.handleName = handleName;
}
public static String getHandleNameByType(Integer type){
List<NettyMessageType> messageTypes = Arrays.asList(NettyMessageType.values());
NettyMessageType nettyMessageType = messageTypes.stream().filter(m -> m.getType().equals(type)).findFirst().get();
return nettyMessageType.getHandleName();
}
}
上述模式具体的使用:
HandlerServiceFactory.getHandlerService(NettyMessageType.getHandleNameByType(nettyMessageVO.getMessageType()))
.handlerWebsocket(null,nettyMessageVO);
netty服务集成springweb,提供api接口给其他服务进行实时消息推送
@RestController
@RequestMapping("/api/inner")
public class MessageAPI {
@PostMapping("/sendMessage")
public void sendMessage(@RequestBody NettyMessageVO nettyMessageVO) throws UnknownHostException {
HandlerServiceFactory.getHandlerService(NettyMessageType.getHandleNameByType(nettyMessageVO.getMessageType()))
.handlerWebsocket(null,nettyMessageVO);
}
}
最后websocket 的api编写处理也是使用mybatisplus来处理数据,最后返回数据到前端
五、nacos统一配置管理使用
- 在nacos中创建对应环境的命名空间dev
- 创建bootstrap.yml,${prefix}-${spring.profiles.active}.${file-extension} 为nacos配置中心读取规则,对应服务名,服务环境,配置文件格式
spring: application: name: service-gateway cloud: nacos: discovery: server-addr: config: namespace: 85980dd0-86a2-4c67-80db-d13651592e4a server-addr: file-extension: yml profiles: active: dev
- 共用配置例如数据库,redis信息采用如下注解进行其他配置加载
spring: cloud: nacos: config: ext-config[0]: data-id: common.yml refresh: false
总结
这些就是本次更新的内容,利用自己空闲时间写写学学的小东西,这里面还有很多需要优化的地方,后续再补充完善,例如:
1.性能问题,有些表设计的不够合理,选择其他的数据库,毕竟聊天信息是海量的。
2.系统高可用问题
3.系统安全需要做信息加密传输
欢迎大家沟通交流,感谢这个vue仿微信的前端大佬,本人的前端很水
目录