当前位置：首页 > news >正文

WebSocket实现HTML+SpringBoot聊天功能，小程序+SpringBoot聊天功能

news 文章来源：https://blog.csdn.net/m0_59799878/article/details/135848862 2024/11/30 10:42:48

一、认识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 {@Overridepublic void configureMessageBroker(MessageBrokerRegistry config) {config.enableSimpleBroker("/user","/agent","/topic"); // 定义消息代理，客户端订阅的地址前缀config.setApplicationDestinationPrefixes("/app"); // 定义客户端发送消息的地址前缀config.setUserDestinationPrefix("/user");}@Overridepublic 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 {@Autowiredprivate 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 {@Overridepublic void configureMessageBroker(MessageBrokerRegistry config) {config.enableSimpleBroker("/user","/agent","/topic"); // 定义消息代理，客户端订阅的地址前缀config.setApplicationDestinationPrefixes("/app"); // 定义客户端发送消息的地址前缀config.setUserDestinationPrefix("/user");}@Overridepublic 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 {@Beanpublic 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;@Autowiredprivate SessionPool sessionPool;
//    @Autowired
//    private RedisUtils redisUtils;private static WebSocketEndPoint webSocketEndPoint;//初始化 ②@PostConstructpublic void init() {webSocketEndPoint = this;webSocketEndPoint.sessionPool = this.sessionPool;}//连接建立成功调用的方法@OnOpenpublic void onOpen(Session session, @PathParam("userId") String userId) {//把会话加入连接池中//userId通过用户传入，session是系统自动产生SessionPool.sessions.put(userId, session);//TODO 可以添加日志操作}//关闭会话的时候@OnClosepublic void onClose(Session session) throws IOException {webSocketEndPoint.sessionPool.close(session.getId());session.close();}//接收客户端的消息后调用的方法，在这里可以进行各种业务逻辑的操作@OnMessagepublic 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 {@Autowiredprivate RedisUtils redisUtils;//key-value : userId - 会话（系统创建）public static Map<String, Session> sessions = new ConcurrentHashMap<>();//避免多线程问题public void close(String sessionId) {//sessionId是在session中添加了一个标识，准确定位某条sessionfor (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();//获取用户sessionSession 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完整代码的朋友可以私信博主，

好了本次分享就到此结束。

一、认识WebSocket

二、HTML实现聊天

三、微信小程序实现聊天

相关文章：