聊天业务

一、聊天需求

实现聊天的功能，一对一、多对多

二、需求分析

明白需求的意义，明确自己要做的事情

三、设计

数据库设计

接口设计

技术选型：websocket

四、编码-后端

SpringBoot整合WebSocket,实现聊天服务器
实现步骤：
1.依赖jar

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

2.编写配置文件类

@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter createSEE(){
        return new ServerEndpointExporter();
    }
}

3.实现服务器类

@Component
@Scope(scopeName = "prototype")
@ServerEndpoint("/chat/server/{nickname}")
public class ChatServer {
    private String nickname;//用户的昵称
    private Session session;//会话对象
    public static ConcurrentHashMap<String,Session> users=new ConcurrentHashMap<>();//记录当前用户
    @OnOpen //连接-服务端
    public void open(@PathParam("nickname") String name,Session session){
        if(users.contains(name)){
            //昵称已占用
            sendMsg(session,"亲，昵称已被占用！");
        }else {
            this.nickname=name;
            this.session=session;
            users.put(name,session);
            sendMoreMsg("欢迎 "+name+" 进入聊天区！");
        }
    }
    @OnMessage //监听 消息，接收消息
    public void message(String msg,Session session){
        System.err.println("服务端接收："+msg);
        sendMsg(session,"已收到，时间-"+System.currentTimeMillis());
        sendMoreMsg(nickname+"-说："+msg);
    }
    @OnError //异常监听，只要出错误
    public void error(Throwable throwable){
        System.err.println("出错了");
    }
    @OnClose //监听关闭
    public void close(Session session){
        users.remove(nickname);//移除
        sendMoreMsg("让我们掌声欢送 "+nickname+" 的离开！");
    }
    //发送单挑消息
    private void sendMsg(Session session,String msg){
        try {
            //发送消息
            session.getBasicRemote().sendText(msg);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    //群发消息
    private static void sendMoreMsg(String msg){
        try {
            //发送消息
            for(String s:users.keySet()){
                users.get(s).getBasicRemote().sendText(msg);
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    //推送消息
    public static boolean pushMsg(String msg){
        sendMoreMsg(msg);
        return true;
    }
}

测试截图：

五、编码-前端

绘制聊天页面，实现websocket的调用

参考代码：

<template>
    <div>
        <!-- 1.连接 -->
        <div>
            <van-cell-group inset>
              <van-field
                v-model="nickname"
                center
                label-width="50px"
                clearable
                label="昵称"
                placeholder="请输入昵称"
              >
                <template #button>
                  <van-button size="small" type="primary" @click="joinRoom()">连接</van-button>
                  <van-button size="small" style="margin-left: 10px;" type="info" @click="exitRoom()">退出</van-button>
                </template>
              </van-field>
            </van-cell-group>
        </div>
        <!-- 2.聊天信息 -->
        <div>
            <van-cell v-for="item in msgs" :key="item" :title="item" />
        </div>
        <!-- 3.发送消息 -->
        <div style="position: absolute; bottom: 37px;width: 100%;">
            <van-cell-group inset>
              <van-field
                v-model="msg"
                center
                clearable
                placeholder="请输入聊天信息"
              >
                <template #button>
                  <van-button size="small" type="primary" @click="sendMsg()">发送</van-button>
                </template>
              </van-field>
            </van-cell-group>
        </div>
    </div>
</template>
<script>
export default{
    data(){
        return{
            nickname:"",
            msg:"",
            msgs:[
                "测试01"
            ],
            ws:{}
        }
    },
    methods:{
        joinRoom(){
            if ('WebSocket' in window){
                //完成实例化
                this.ws = new WebSocket("ws://localhost:9999/chat/server/"+this.nickname);  
                 //监听消息接收
                this.ws.onmessage = (res=>{
                        console.log("数据已接收...",res.data);
                        this.msgs.push(res.data);    
                });
                //连接服务器
                this.ws.onopen=(res=>{
                   this.msgs.push("加入成功");     
                });
            }
        },
        exitRoom(){
            console.log("退出");
             this.ws.close();
             this.msgs.push("退出聊天室");
             this.nickname="";
        },
        sendMsg(){//发送聊天消息
            this.ws.send(this.msg);//发送消息
            this.msgs.push("我说："+this.msg);
            this.msg="";
        }
    }
}
</script>
<style>
</style>