前后端分离WebSocket,脱离HttpSession实现实时聊天

WebSocket

WebSocket是一种协议

客户端

事件	事件处理程序	描述
open	websocket对象.onopen	连接建立时触发
message	websocket对象.onmessage	客户端收到服务端数据时触发
error	websocket对象.onerror	通信发生错误时触发
cloes	websocket对象.close	连接关闭时触发

方法	描述
send()	使用连接时发送数据

客户端处理

 //获取自己的的用户名
    var user = sessionStorage.getItem("userName");
    //好友名字
    var hyUser;

    //创建webSocket对象
    var ws = new WebSocket("ws://localhost:7070/chat/"+sessionStorage.getItem("userName"));
    //给ws绑定事件

    //建立连接后触发的事件
    ws.onopen = function (){
        //在线信息
        $(".userName1").html(user+"<h7 style='color: green'>在线</h7>");
    }

    //接收到服务端发送的消息
    ws.onmessage = function (res){
        //获取服务端推送过来的消息转换为json
        var data = JSON.parse(res.data);

        //系统消息
        if (data.isSystem){
            isSystem(data);
        }else {//不是系统消息
            noIsSystem(data);
        }
    }

    //关闭时触发的信息
    ws.onclose = function (){
        //离线信息
        $(".userName1").html(user+"<h7 style='color: red'>离线</h7>");
    }


    //系统消息处理
    function isSystem(data){
        //渲染到好友列表
        var hyxx = "";
        //渲染到系统消息
        var xtxx = "";

        for (var name of data.message){
            if(name == user) continue;
            hyxx+="<li class='hy'>"+name+"</li>";
            xtxx+="<li class='xt' style='color: #9d9d9d'>"+name+"---->已上线</li>";
        }
        $("#hyxx").html(hyxx);
        $("#xtxx").html(xtxx);


        //好友选择
        var hyList = document.querySelectorAll(".hy");//获取好友列表
        hyList.forEach((item, index) => {
            item.addEventListener('click', () => {
                hyUser = hyList[index].innerText;
                $(".userName2").text("当前正与" + hyUser + "聊天");
            });
        });
    }

    //不是系统消息处理
    function noIsSystem(data){
        //处理好友发送的消息
        console.log(data);
    }

    //发消息
    $("#submit").click(function (){
        //聊天文本获取
        var data =$("#input_text").val();
        //发送后清空文本域
        $("#input_text").val("")
        //发送消息格式
        var json ={"userName":hyUser,"message":user+"----->"+hyUser+"----->"+data};
        ws.send(JSON.stringify(json));
        //消息展示到聊天区域
    })


    //退出登录
    $("#exit").click(function (){
        window.location.replace("login.html");
    })

服务端

方法	描述	注解
onClose()	当会话关闭时调用	@onClose
onOpen()	当开启一个新的会话时调用，该方法是客户端与服务端握手成功后调用	@onOpen
onError()	当连接过程中异常时调用	@onError

服务端消息通信层

package com.dayu.websocket.ws;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.dayu.websocket.utils.MessageUtils;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.Map;
import java.util.Set;
import java.util.concurrent.ConcurrentHashMap;

@ServerEndpoint("/chat/{userName}")
@Component
@Slf4j
public class ChatEndpoint {

    /**
     * 用来存储每一个客户端对象对应的ChatEndpoint对象
     * Key 是 用户名
     * Value 是 Session 将要发送的人
     */
    private static Map<String,ChatEndpoint> userNameMap = new ConcurrentHashMap<>();


    /**
     * 声明websocket中的session对象,通过该对象可以发送消息给指定的用户
     */
    private Session session;

    /**
     * 连接建立时触发
     */
    @OnOpen
    public void onOpen(Session session,@PathParam("userName") String userName){
        this.session=session;
        System.out.println("userName=============>"+userName);
        userNameMap.put(userName,this);//这里的this代表ChatEndpoint类

        //将当前在线用户的用户名推送给所用的客户端
        //1.获取消息
        String message = MessageUtils.getMessage(true,null,getUserName());
        //2.调用方法进行系统消息推送
        UserAll(message);
        //3.当前在线人数
        log.info("当前在线人数=========>"+userNameMap.size()+"人");
    }


    //群发消息
    private void UserAll(String message){
        try {
            Set<String> names = userNameMap.keySet();
            for (String name : names){
                ChatEndpoint chatEndpoint = userNameMap.get(name);
                chatEndpoint.session.getBasicRemote().sendText(message);//发送消息
            }
        } catch (IOException e) {
            System.out.println("6=>6=>6");
        }
    }


    //将用户名全部存入Set单列集合
    private Set<String> getUserName(){
        return userNameMap.keySet();//map集合.keySet();就是获取当前map全部的key
    }

    /**
     * 接收到客户端发送的数据时并调用
     * @param message 返回的消息
     * @param session 返回的要发送用户对象
     */
    @OnMessage
    public void onMessage(String message,Session session){
        JSONObject json = JSON.parseObject(message);
        String user = json.getString("message");
        //获取发送人和消息对话
        String[] userMessage = user.split("----->");
		//userMessage[0] 发送者
        //userMessage[1] 接收者
        //userMessage[2] 消息
        try {//参数1.是否时系统消息 参数2.谁发的 参数3.发出的消息
            String resultMessage = MessageUtils.getMessage(false,userMessage[0],userMessage[2]);
            System.out.println(userMessage[0]+"------------------>"+userMessage[1]);
            System.out.println("<<"+userMessage[2]+">>");
            userNameMap.get(userMessage[1]).session.getBasicRemote().sendText(resultMessage);//发送消息
        } catch (IOException e) {
            System.out.println("6=>6=>6");
        }

    }

    /**
     * 连接关闭时调用
     */
    @OnClose
    public void onClose(@PathParam("userName") String userName){
        System.out.println(userName);
        //离线退出
        userNameMap.remove(userName);

        //当前在线人数
        log.error("当前在线人数=========>"+userNameMap.size()+"人");
    }
}

服务端配置类

package com.dayu.websocket.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

@Configuration
public class WebsocketConfiguration {

    /**
     * ServerEndpointExporter 类是一个 Spring 组件,
     * 它会扫描 Spring 容器中所有带有 @ServerEndpoint 注解的类，
     * 并将其注册为 WebSocket 端点。此外，它还会自动处理注解了 @OnOpen、@OnClose、@OnError、@OnMessage 等注解的方法，
     * 并将它们注册为对应端点的事件处理程序。
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}