目录
一、认识WebSocket
二、HTML实现聊天
三、微信小程序实现聊天
一、认识WebSocket
1.首先博主在初学Java时自我感觉走了很多弯路,因为以前见识短,在接触聊天功能时根本就没能想到有WebSocket这个聊天框架,就只能用底层的UDP或TCP实现聊天功能,及其繁琐。
1.在入门Java后的朋友学到网络编程会知道UDP和TCP两个知识点,没错WebSocket是一种在单个TCP连接上进行全双工通信的协议。基于TCP协议的一个框架,TCP知识点比较多,具体咱们就不多说了,直接实践怎么使用吧。
二、HTML实现聊天
首先我先贴出完整代码,然后解释
1.html代码,这里我就不单独写js文件了(这个html实现的是一对一聊天,还有一对多,多对多群聊)
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/sockjs/1.1.4/sockjs.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
<script>
var stompClient = null;
function connect() {
var content = $("#message").val();
var sender = 'tbb';
var socket = new SockJS('http://127.0.0.1:8080/chat');
stompClient = Stomp.over(socket);
stompClient.connect({}, function (frame) {
console.log('Connected: ' + frame);
stompClient.subscribe('/user/tbb/message', function (message) {
showMessage(JSON.parse(message.body));
});
});
}
function disconnect() {
if (stompClient !== null) {
stompClient.disconnect();
}
console.log("Disconnected");
}
function sendMessage() {
var content = $("#message").val();
var sender = $("#sender").val();
stompClient.send("/app/chat/send/to/user", {}, JSON.stringify({
content: content,
sender: sender,
unionId: sender,
}));
}
function showMessage(message) {
$("#chat").append("<div>" + message.sender + ": " + message.content + "</div>");
}
</script>
<div>
<input type="text" id="sender" placeholder="Enter your name">
<input type="text" id="message" placeholder="Type a message...">
<button onclick="sendMessage()">Send</button>
<button onclick="connect()">Connect</button>
<button onclick="disconnect()">Disconnect</button>
</div>
<div id="chat">123</div>
2.SpringBoot完整代码
(1)WebSocketConfig.java配置文件(关键文件)
package com.example.mengchuangyuan.common.chat.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
config.enableSimpleBroker("/user","/agent","/topic"); // 定义消息代理,客户端订阅的地址前缀
config.setApplicationDestinationPrefixes("/app"); // 定义客户端发送消息的地址前缀
config.setUserDestinationPrefix("/user");
}
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/chat").setAllowedOriginPatterns("*").withSockJS(); // 定义WebSocket端点,客户端连接的地址
}
}
(2)ChatController.java控制层
package com.example.mengchuangyuan.common.chat.controller;
import com.example.mengchuangyuan.common.chat.entry.ChatMessage;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.messaging.simp.annotation.SendToUser;
import org.springframework.stereotype.Controller;
@Slf4j
@Controller
public class ChatController {
@Autowired
private SimpMessagingTemplate simpMessagingTemplate;
/**
* 发消息(群发)
* @param chatMessage 获取用户消息
* @return 返回要回复的消息
*/
//第一种方式
@MessageMapping("/chat/send") // 定义消息映射路径
@SendTo("/agent/public") // 发送消息到指定的代理路径
public ChatMessage sendMessage(ChatMessage chatMessage) {
log.info(chatMessage.toString());
return chatMessage;
}
//方法二
// @MessageMapping("/agent/send")
// public void getAgentInfo (@Payload ChatMessage chatMessage) {
// System.out.println("发送群发消息");
// // 使用api进行推送
// simpMessagingTemplate.convertAndSend("/agent/public2", chatMessage);
// }
/**
* 发送给自己?
* @param chatMessage
* @return
*/
@MessageMapping("/agent/send/user")
// 这里的路径必须还是以广播的前缀为前缀,否则无法接收
@SendToUser("/agent/info")
public ChatMessage sendUserMessage(ChatMessage chatMessage) {
log.info(chatMessage.toString());
return chatMessage;
}
/**
* 发送给指定用户
* @param chatMessage
* @return
*/
@MessageMapping("/chat/send/to/user")
// 这里的路径必须还是以广播的前缀为前缀,否则无法接收
public void sendToUserMessage(ChatMessage chatMessage) {
log.info("发送给指定用户:"+chatMessage.toString());
simpMessagingTemplate.convertAndSendToUser(chatMessage.getUnionId(),"/message",chatMessage);
}
}
package com.example.mengchuangyuan.common.chat.entry;
import lombok.Data;
@Data
public class ChatMessage {
private String unionId;
private String content;
private String sender;
}
以上就是完整代码
3.接下来我来简单解释一下,因为一对一聊天比其他相对绕一点,所以博主就解释它就好了,且看下面四段被截取的代码
function connect() {
var content = $("#message").val();//发送的消息内容
var sender = 'tbb';//接收的人
var socket = new SockJS('http://127.0.0.1:8080/chat');//连接后端socket的地址
stompClient = Stomp.over(socket);
stompClient.connect({}, function (frame) {
console.log('Connected: ' + frame);
//这里我写死了,接收来自tbb这个人的消息,'/user/tbb/message'可以改成'/user/'+sender+'/message'
stompClient.subscribe('/user/tbb/message', function (message) {
showMessage(JSON.parse(message.body));
});
});
}
上面的代码可以称之为连接服务器并且实时监听tbb给后端发来的消息
package com.example.mengchuangyuan.common.chat.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
config.enableSimpleBroker("/user","/agent","/topic"); // 定义消息代理,客户端订阅的地址前缀
config.setApplicationDestinationPrefixes("/app"); // 定义客户端发送消息的地址前缀
config.setUserDestinationPrefix("/user");
}
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/chat").setAllowedOriginPatterns("*").withSockJS(); // 定义WebSocket端点,客户端连接的地址
}
}
上面两段是对应的,在html的http://127.0.0.1:8080/chat中chat对应上面Java代码的chat,必须一致,要不然连不上,/user/tbb/message路由中user对应上面Java代码的user,必须一致,要不然发消息时对方收不到消息(博主以前踩过这个坑),而这个tbb则是接收发消息的人的消息
function sendMessage() { //发消息给对方
var content = $("#message").val();
var sender = $("#sender").val();
stompClient.send("/app/chat/send/to/user", {}, JSON.stringify({ //发消息的后端的路由
content: content,//消息内容
sender: sender,//消息姓名
unionId: sender,//消息id,这里我把消息姓名也作为id
}));
}
/**
* 发送给指定用户
* @param chatMessage
* @return
*/
@MessageMapping("/chat/send/to/user")
// 这里的路径必须还是以广播的前缀为前缀,否则无法接收
public void sendToUserMessage(ChatMessage chatMessage) {
log.info("发送给指定用户:"+chatMessage.toString());
//chatMessage.getUnionId()是发送给某人的id,/message对应四段中第一段的/user/tbb/message中的message
simpMessagingTemplate.convertAndSendToUser(chatMessage.getUnionId(),"/message",chatMessage);
}
最后两段是对应的,用于给对方发消息。
三、微信小程序实现聊天
首先,这是博主自己摸索了很久出来的一套小程序聊天体系。
1.聊天数据结构及框架
涉及到了redis缓存,因此需要下载redis的依赖包
聊天数据结构如下(自我感觉存在一定缺陷,懒得改进了):
整体储存结构:
聊天界面结构:{openid1+openid2:{linkType:[info1,info2]}},
如图聊天界面:
聊天列表结构:{linkType:[openid1+openid2,openid3+openid4]}
如图聊天列表:
info的结构:{mid:"",type:"",linkType:"",formUser:fromUser,toUser:toUser,message:"",date:"",nowDate:""}
fromUser和toUser的结构:{openid:"",phone:"",name:"",headImg:""}
openid1和openid2为fromUser和toUser的openid
linkType:属于哪个板块聊天(比如相亲聊天板块或者外卖或商城聊天板块)
type:作用于获取redis缓存的聊天记录和聊天心跳检测(备注:因为获取历史聊天记录和心跳检测是以聊天方式向后端发起请求,因此我用type的聊天要区分是用户发起聊天还是其他请求。由前端自动发动聊天请求,获取历史聊天记录,由前端发起聊天请求检测心跳,检测心跳的目的是为了确保聊天过程不掉线)
date:聊天的时间段(备注:可以设置5分钟显示一个时间段聊天的时间,比如微信隔5分钟后再发一条信息上面会显示时间,这里我设置的date就充当这个角色)
nowDate:每一句话的时间,主要用于计算当前时间是否与上一句聊天记录的时间是否间隔5分钟,如果间隔5分钟那么上面的date记录该时间,如果间隔不到5分钟,则date设置为空。
整体结构上:两个人的openid连接作为获取他们之间所有功能板块历史聊天记录的内容的键(key)。以linkType作为键(key)获取某个功能板块的所有历史聊天记录,这里聊天记录用集合来储存保证了聊天记录顺序。
2.Java SpringBoot代码
(1)MiniWebSocketConfig.java文件
package com.example.mengchuangyuan.common.chat.mini.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
@Configuration
public class MiniWebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}
(2)MiniWebSocketController.java文件
package com.example.mengchuangyuan.common.chat.mini.controller;
import com.example.mengchuangyuan.common.redis.tool.SufferVariable;
import com.example.mengchuangyuan.common.tool.Result;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;
import java.util.*;
@Slf4j
@RestController
@RequestMapping("/mini/socket")
public class MiniWebSocketController {
@Value("${upload.messageChatUrl}")
private String messageChatUrl;
@Value("${upload.messageChatPath}")
private String messageChatPath;
private final List<Map<String,Object>> mapList = new ArrayList<>();
@GetMapping("/get/openid/history")
private Result getOpenidHistory(@RequestParam("openid") String openid,@RequestParam("linkType") String linkType){
// log.info(openid);
List<String> openids = (List<String>) SufferVariable.openidKeys.get(linkType);
// if (keyMap==null){
// return Result.error();
// }
// List<String> openids = (List<String>) keyMap.get(openid);
// log.info("所以openid"+String.valueOf(openids));
if (openids==null){
return Result.error();
}
mapList.clear();
for (String openid1: openids) {
if (openid1.contains(openid)) {
// if (SufferVariable.messageMap.get(openid1)!=null){
mapList.add((Map<String, Object>) SufferVariable.messageMap.get(openid1));
// log.info("聊天记录缓存"+openid);
// log.info(String.valueOf(SufferVariable.messageMap.get(openid1)));
// }
}
}
return Result.success(mapList);
}
//上传聊天图片
@PostMapping("/img/upload")
public Result imgUpDown(@RequestParam("file") MultipartFile file,
@RequestParam("filename") String filename) throws IOException {
System.out.println(filename);
File file1 = new File(messageChatPath,filename);
if(!file1.exists()) {
if(!file1.mkdirs()){ //创建目录
return Result.error();
}
}
//获取文件名
String fileName = file.getOriginalFilename();
//获取文件后缀名。也可以在这里添加判断语句,规定特定格式的图片才能上传,否则拒绝保存。
String suffixName = fileName.substring(fileName.lastIndexOf("."));
//为了避免发生图片替换,这里使用了文件名重新生成
fileName = UUID.randomUUID()+suffixName;
file.transferTo(new File(file1,fileName));
return Result.success(messageChatUrl+filename+"/"+fileName);
}
}
(3)WebSocketEndPoint.java文件
package com.example.mengchuangyuan.common.chat.mini.mapper;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.example.mengchuangyuan.common.redis.mapper.RedisUtils;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import javax.annotation.PostConstruct;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
//对外公布的一个后端站点
//ws://localhost:8080/websocket/用户id
@ServerEndpoint(value = "/websocket/{userId}")
@Component
@Slf4j
public class WebSocketEndPoint {
//与某个客户端的连接会话,需要他来给客户端发送数据
private Session session;
@Autowired
private SessionPool sessionPool;
// @Autowired
// private RedisUtils redisUtils;
private static WebSocketEndPoint webSocketEndPoint;
//初始化 ②
@PostConstruct
public void init() {
webSocketEndPoint = this;
webSocketEndPoint.sessionPool = this.sessionPool;
}
//连接建立成功调用的方法
@OnOpen
public void onOpen(Session session, @PathParam("userId") String userId) {
//把会话加入连接池中
//userId通过用户传入,session是系统自动产生
SessionPool.sessions.put(userId, session);
//TODO 可以添加日志操作
}
//关闭会话的时候
@OnClose
public void onClose(Session session) throws IOException {
webSocketEndPoint.sessionPool.close(session.getId());
session.close();
}
//接收客户端的消息后调用的方法,在这里可以进行各种业务逻辑的操作
@OnMessage
public void onMessage(String message, Session session) {
System.out.println(message);
// log.info("redisUtils:"+redisUtils);
//心跳检测
if (message.equalsIgnoreCase("ping")) {
try {
Map<String, Object> params = new HashMap<>();
params.put("type", "pong");
session.getBasicRemote().sendText(JSON.toJSONString(params));
} catch (Exception e) {
e.printStackTrace();
}
return;
}
//将Json字符串转为键值对
// HashMap params = JSON.parseObject(message, HashMap.class);
JSONObject params = JSON.parseObject(message);
webSocketEndPoint.sessionPool.sendMessage(params);
//这里的业务逻辑仅仅是把收到的消息返回给前端
// SessionPool.sendMessage(message);
}
}
(4)SessionPool.java文件
package com.example.mengchuangyuan.common.chat.mini.mapper;
import com.alibaba.fastjson.JSON;
import com.example.mengchuangyuan.common.redis.mapper.RedisUtils;
import com.example.mengchuangyuan.common.redis.tool.SufferVariable;
import com.example.mengchuangyuan.common.tool.DateYMDms;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.stereotype.Controller;
import javax.websocket.Session;
import java.util.*;
import java.util.concurrent.ConcurrentHashMap;
@Component
@Slf4j
public class SessionPool {
@Autowired
private RedisUtils redisUtils;
//key-value : userId - 会话(系统创建)
public static Map<String, Session> sessions = new ConcurrentHashMap<>();//避免多线程问题
public void close(String sessionId) {
//sessionId是在session中添加了一个标识,准确定位某条session
for (String userId : SessionPool.sessions.keySet()) {
Session session = SessionPool.sessions.get(userId);
if (session.getId().equals(sessionId)) {
sessions.remove(userId);
break;
}
}
}
public void sendMessage(String userId, String message) {
sessions.get(userId).getAsyncRemote().sendText(message);
}
//消息的群发,业务逻辑的群发
public void sendMessage(String message) {
// redisUtils.cacheValue("chatMessage","String.valueOf(SufferVariable.messageMap)");
for (String sessionId : SessionPool.sessions.keySet()) {
SessionPool.sessions.get(sessionId).getAsyncRemote().sendText(message);
}
}
//点对点的消息推送
public void sendMessage(Map<String, Object> params) {
log.info("消息内容:"+String.valueOf(params));
long mid = System.currentTimeMillis();
Map<String,Object> formUser = (Map<String, Object>) params.get("formUser");
Map<String,Object> toUser = (Map<String, Object>) params.get("toUser");
String userId = formUser.get("openid").toString();
String toUserId = toUser.get("openid").toString();
// String msg = params.get("message").toString();
String type = params.get("type").toString();
String linkType = params.get("linkType").toString();
//获取用户session
Session session = sessions.get(toUserId);
Map<String,Object> keyMap;
List<String> setOpenid;
Map<String,Object> map;
List<Object> list;
String uid = userId+toUserId;
params.put("mid",mid);
if (SufferVariable.messageMap.get(userId+toUserId)==null&&SufferVariable.messageMap.get(toUserId+userId)==null){
// messageMap.put(userId+toUserId,userId+toUserId);
map = new HashMap<>();
list = new ArrayList<>();
map.put(linkType,list);
SufferVariable.messageMap.put(uid,map);
// list.add(params);
}else {
if (SufferVariable.messageMap.get(userId+toUserId)!=null){
uid = userId+toUserId;
}else {
uid = toUserId+userId;
}
map = (Map<String, Object>) SufferVariable.messageMap.get(uid);
list = (List<Object>) map.get(linkType);
}
//获取历史记录
if (type.equalsIgnoreCase("history")){
if (sessions.get(userId) != null) {
Map<String, Object> map2 = new HashMap<>();
// map = (Map<String, Object>) SufferVariable.messageMap.get(uid);
map2.put("type", "isHistory");
map2.put("message",list);
sessions.get(userId).getAsyncRemote().sendText(JSON.toJSONString(map2));
}
return;
}
String nowDate = DateYMDms.getUtilDate();
if (list.size()!=0) {
Map<String, Object> lastMap = (Map<String, Object>) list.get(list.size() - 1);
String date = DateYMDms.getYMDms(5, lastMap.get("nowDate").toString());
params.put("date", date);
}else {
params.put("date", nowDate);
}
// if (SufferVariable.openidKeys.get(linkType)==null){
// keyMap = new HashMap<>();
// }else {
// keyMap = (Map<String, Object>) SufferVariable.openidKeys.get(linkType);
// }
// if (keyMap.get(userId)==null){
// setOpenid = new ArrayList<>();
// }else {
// log.info(String.valueOf(SufferVariable.openidKeys));
// setOpenid = (List<String>) keyMap.get(userId);
// }
if (SufferVariable.openidKeys.get(linkType) == null){
setOpenid = new ArrayList<>();
}else {
setOpenid = (List<String>) SufferVariable.openidKeys.get(linkType);
}
setOpenid.add(uid);
Set<String> set = new LinkedHashSet<>(setOpenid);
setOpenid.clear();
setOpenid.addAll(set);
// keyMap.put(userId,setOpenid);
SufferVariable.openidKeys.put(linkType,setOpenid);
params.put("nowDate",nowDate);
list.add(params);
map.put(linkType,list);
SufferVariable.messageMap.put(uid,map);
redisUtils.cacheValue("chatMessage",SufferVariable.messageMap);
redisUtils.cacheValue("chatOpenidKeys",SufferVariable.openidKeys);
if (session != null) {
log.info(uid+":"+String.valueOf(SufferVariable.messageMap.get(uid)));
session.getAsyncRemote().sendText(JSON.toJSONString(params));
}
// log.info(String.valueOf(messageMap));
// params.remove("formUserId");
//session不为空的情况下进行点对点推送
}
}
以上小程序相关代码存在一些缺陷,并且未完整,
需要小程序及SpringBoot完整代码的朋友可以私信博主,
好了本次分享就到此结束。