WebSocket(二) -- 使用原生webSocket实现一个简单的聊天

leo_messi94

已于 2022-10-14 15:40:24 修改

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：网络文章标签： websocket 网络协议网络

于 2022-10-14 11:14:38 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_39724194/article/details/127311451

上文中，我们已经基本了解了webscoket的原理以及部分api的实现，接下来我们就使用websocket来实现一个简单的聊天室功能。

1. 需求分析

1.1 登陆聊天室：

在这里插入图片描述

1.2 登陆成功后与别人进行聊天

李四界面：
张三界面：
在李四页面的好友列表中，点击张三，与之聊天：
在张三好友列表页，点击李四，打开对话框，可以接收到李四的消息：
互相发送：

2. 实现流程：

（下图中蓝色的@onError应该为@onClose）
在这里插入图片描述

3. 消息格式：

在这里插入图片描述

4. 导入相关jar包

<dependency>
   <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

5. 代码实现：

5.1 POJO类：

5.1.1 浏览器发送给服务器的webSocket数据：

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Message {
   
   
    private String toName;
    private String message;
    private String fromName;
}

5.1.2 服务端给客户端发送的websocket数据：

@Data
@NoArgsConstructor
@AllArgsConstructor
//用户间传送的消息
public class ResultMessage {
   
   
    private boolean isSystem;
    private String fromName;
    //private String toName;
    private Object message;
}

5.1.3 用于登陆返回给浏览器的数据

@Data
@AllArgsConstructor
@NoArgsConstructor
//登录时用到的信息
public class Result {
   
   
    private boolean flag;
    private String message;
}

5.2 消息工具类：

//封装发送的消息内容
public class MessageUtils {
   
   
    public static String getMessage(boolean isSystemMessage,String fromName,Object message){
   
   
        try{
   
   
            ResultMessage resultMessage = new ResultMessage();
            resultMessage.setSystem(isSystemMessage);
            resultMessage.setMessage(message);
            if(fromName != null){
   
   
                resultMessage.setFromName(fromName);
            }
//            if(toName !=null ){
   
   
//                resultMessage.setToName(toName);
//            }
            ObjectMapper mapper = new ObjectMapper();
            return mapper.writeValueAsString(resultMessage);
        }catch (JsonProcessingException e){
   
   
            e.printStackTrace();
        }
        return null;
    }
}

5.3 主要前端代码：

var toName;
var username;
//点击好友名称展示相关消息
function showChat(name){
   
   
    toName = name;
    //现在聊天框
    $("#content").html("");
    $("#content").css("visibility","visible");
    // 显示正在和谁聊天
    $("#Inchat").html("当前正与"+toName+"聊天");
    // 从sessionStorage中获取历史信息
    var chatData = sessionStorage.getItem(toName);
    if (chatData != null){
   
   
        // 将聊天记录渲染到聊天区
        $("#content").html(chatData);