springboot websocket通信

阳光穿透心脏的1/2处 2023-10-09 21:00 60阅读 0赞

##  ##

**目录**

一、websocket是什么

二、实现websocket

2.1参考学习b站资料（一定要看，前后端详细）

2.2学习配套代码

--------------------

## 一、websocket是什么 ##

[WebSocket\_ohana！的博客-CSDN博客][WebSocket_ohana_-CSDN]

## 二、实现websocket ##

### 2.1参考学习b站资料（一定要看，前后端详细） ###

[01-websocket协议及实现\_哔哩哔哩\_bilibili][01-websocket_bilibili]

### 2.2学习配套代码 ###

1.导入pom依赖

<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>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-devtools</artifactId>
                <scope>runtime</scope>
                <optional>true</optional>
            </dependency>
            <dependency>
                <groupId>org.projectlombok</groupId>
                <artifactId>lombok</artifactId>
                <optional>true</optional>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-test</artifactId>
                <scope>test</scope>
            </dependency>

2.编写配置类

//配置类
    @Configuration
    public class WebSocketConfig {
        @Bean
        //注入ServerEndpointExporter bean对象，自动注册使用注解@ServerEndpoint的bean
        public ServerEndpointExporter serverEndpointExporter(){
            return new ServerEndpointExporter();
        }
    }

3.所需要的pojo类：

![b81fec2eae1f449eabbebc7434dac2ed.png][]

![52b18431cf6f48a9beb7dce8f5aa74ef.png][]![1189af879b74440da77060ea8ec74e18.png][] 4.需要的工具类，用于转化信息格式

import com.example.ex1.mes_websocket.pojo.ResultMessage;
    import com.fasterxml.jackson.core.JsonProcessingException;
    import com.fasterxml.jackson.databind.ObjectMapper;
    
    public class MessageUtils {
        public static String getMessage(boolean isSystemMessage,String fromName,Object message){
            try {
                ResultMessage result = new ResultMessage();
                result.setSystem(isSystemMessage);
                result.setMessage(message);
                if (fromName!=null){
                    result.setFromName(fromName);
                }
                //把字符串转成json格式的字符串
                ObjectMapper mapper = new ObjectMapper();
                return mapper.writeValueAsString(result);
            }catch (JsonProcessingException e){
                e.printStackTrace();
            }
            return null;
        }
    }

5.登录的验证以及获取用户名的controller

import com.example.ex1.mes_websocket.pojo.Result;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.RestController;
    
    import javax.servlet.http.HttpSession;
    
    @RestController
    public class LoginController {
        @RequestMapping("/toLogin")
        public Result tologin(@RequestParam("user") String user,@RequestParam("pwd") String pwd, HttpSession session){
            Result result = new Result();
            if (user.equals("张三")&&pwd.equals("123")){
                result.setFlag(true);
                session.setAttribute("user",user);
            }else if (user.equals("李四")&&pwd.equals("123")){
                result.setFlag(true);
                session.setAttribute("user",user);
            }else if (user.equals("123")&&pwd.equals("123")){
                result.setFlag(true);
                session.setAttribute("user",user);
            }
            else if (user.equals("王五")&&pwd.equals("123")){
                result.setFlag(true);
                session.setAttribute("user",user);
            }else {
                result.setFlag(false);
                result.setMessage("登录失败");
            }
            return result;
        }
    
        @RequestMapping("/getUsername")
        public String getUsername(HttpSession session){
            String username = (String) session.getAttribute("user");
            return username;
        }
    }

6.登录页面（前端页面用到jquery）

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script src="js/jquery.min.js"></script>
    <form id="loginForm">
        <label>账号：</label>
        <input type="text" name="user">
        <label>密码：</label>
        <input type="password" name="pwd">
        <button type="button" id="btn">登录</button>
    </form>
    <p id="err_msg"></p>
    <script>
        $("#btn").click(function () {
            $.get("toLogin?",$("#loginForm").serialize(),function(res){
                if (res.flag){
                    console.log(res);
                    location.href = "main.html";
                } else {
                    console.log(res);
                    $("#err_msg").html(res.message);
                }
            },"json");
        })
    </script>
    </body>
    </html>

7.主页面

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <style>
        #left{
            float: left;
            width: 30%;
            height: 500px;
            margin-left: 200px;
        }
        #right{
            float: right;
            width: 30%;
            height: 500px;
        }
        #top{
            margin-top: 50px;
            float: top;
            width: 30%;
            height: 250px;
        }
        #content{
            border: aquamarine 1px solid;
            width: 100%;
            height: 300px;
        }
        #input{
            margin-top: 20px;
            width: 100%;
            height: 200px;
        }
        #input input{
            width: 100%;
            height: 100px;
        }
        #input button{
            float: right;
        }
        #mes_left{
            float: left;
    
        }
        #mes_right{
            float: right;
            width: 50%;
            text-align: right;
        }
    </style>
    <body>
    <script src="js/jquery.min.js"></script>
    <h3 style="text-align: center" id="username"></h3>
    <div>
        <div id="left">
            <h4 id="new"></h4>
            <div id="content">
    
            </div>
            <div id="input">
                <input type="text" id="input_text">
                <button id="submit">发送</button>
            </div>
        </div>
        <div id="right">
            <div id="top">
                <p>在线的好友</p>
                <div id="hylist">
    
                </div>
            </div>
            <div id="bottom">
                <p>系统广播</p>
                <div id="xtlist">
                </div>
            </div>
        </div>
    </div>
    <script>
        var username;
        $(function () {
            var toName;
            $.ajax({
                url:"getUsername",
                success:function (res) {
                    username = res;
                    $("#username").html("用户："+ username +"<span>在线</span>");
                    // $("#username").html("用户：123<span>在线</span>");
                },
                async:false //同步请求，只有上面好了才会接着下面
            });
    
            var ws = new WebSocket("ws://localhost:8080/chat");
            ws.onopen = function (ev) {
                $("#username").html("用户："+ username +"<span>在线</span>");
            }
            //接受消息
            ws.onmessage = function (ev) {
                var datastr = ev.data;
                var res = JSON.parse(datastr);
                //判断是否是系统消息
                if(res.system){
                    //好友列表
                    //系统广播
                    var names = res.message;
                    var userlistStr = "";
                    var broadcastListStr = "";
                    for (var name of names){
                        if (name != username){
                            userlistStr += "<a οnclick='showChat(\""+name+"\")'>"+ name +"</a></br>";
                            broadcastListStr += "<p>"+ name +"上线了</p>";
                        }
                    };
                    $("#hylist").html(userlistStr);
                    $("#xtlist").html(broadcastListStr);
    
                }else {
                    //不是系统消息
                    var str = "<span id='mes_left'>"+ res.message +"</span></br>";
                    if (toName == res.fromName) 
                    $("#content").append(str);
    
                    var chatdata = sessionStorage.getItem(res.fromName);
                    if (chatdata != null){
                        str = chatdata + str;
                    }
                    sessionStorage.setItem(res.fromName,str);
    
                };
            },
            ws.onclose = function (ev) {
                $("#username").html("用户："+ username +"<span>离线</span>");
            }
    
            showChat = function(name){
                // alert("dsaad");
                toName = name;
                //清空聊天区
                $("#content").html("");
                $("#new").html("当前正与"+toName+"聊天");
                var chatdata = sessionStorage.getItem(toName);
                if (chatdata != null){
                    $("#content").html(chatdata);
                }
            };
            //发送消息
            $("#submit").click(function () {
                //获取输入的内容
                var data = $("#input_text").val();
                $("#input_text").val("");
                var json = {"toName": toName ,"message": data};
                //将数据展示在聊天区
                var str = "<span id='mes_right'>"+ data +"</span></br>";
                $("#content").append(str);
    
                var chatdata = sessionStorage.getItem(toName);
                if (chatdata != null){
                    str = chatdata + str;
                }
                sessionStorage.setItem(toName,str);
                //发送数据
                ws.send(JSON.stringify(json));
            })
        })
    </script>
    </body>
    </html>

8.获取HttpSession对象的类

import javax.servlet.http.HttpSession;
    import javax.websocket.HandshakeResponse;
    import javax.websocket.server.HandshakeRequest;
    import javax.websocket.server.ServerEndpointConfig;
    
    public class GetHttpSessionConfigurator extends ServerEndpointConfig.Configurator {
        @Override
        public void modifyHandshake(ServerEndpointConfig sec, HandshakeRequest request, HandshakeResponse response) {
            //获取HttpSession对象
            HttpSession httpSession = (HttpSession) request.getHttpSession();
            sec.getUserProperties().put(HttpSession.class.getName(),httpSession);
        }
    }

9.最后的通信类

import com.example.ex1.mes_websocket.pojo.Message;
    import com.example.ex1.mes_websocket.utils.MessageUtils;
    import com.fasterxml.jackson.databind.ObjectMapper;
    import org.springframework.stereotype.Component;
    
    import javax.servlet.http.HttpSession;
    import javax.websocket.*;
    import javax.websocket.server.ServerEndpoint;
    import java.util.Map;
    import java.util.Set;
    import java.util.concurrent.ConcurrentHashMap;
    
    @ServerEndpoint(value = "/chat",configurator = GetHttpSessionConfigurator.class)
    @Component
    public class ChatEndpoint {
    
        //用来存储每个用户客户端对象的ChatEndpoint对象
        private static Map<String,ChatEndpoint> onlineUsers = new ConcurrentHashMap<>();
    
        //声明session对象，通过对象可以发送消息给指定的用户
        private Session session;
    
        //声明HttpSession对象，我们之前在HttpSession对象中存储了用户名
        private HttpSession httpSession;
    
        //连接建立
        @OnOpen
        public void onOpen(Session session, EndpointConfig config){
            this.session = session;
            HttpSession httpSession = (HttpSession) config.getUserProperties().get(HttpSession.class.getName());
            this.httpSession = httpSession;
            //存储登陆的对象
            String username = (String)httpSession.getAttribute("user");
            onlineUsers.put(username,this);
    
            //将当前在线用户的用户名推送给所有的客户端
            //1 获取消息
            String message = MessageUtils.getMessage(true, null, getNames());
            //2 调用方法进行系统消息的推送
            broadcastAllUsers(message);
        }
    
        private void broadcastAllUsers(String message){
            try {
                //将消息推送给所有的客户端
                Set<String> names = onlineUsers.keySet();
                for (String name : names) {
                    ChatEndpoint chatEndpoint = onlineUsers.get(name);
                    chatEndpoint.session.getBasicRemote().sendText(message);
                }
            }catch (Exception e){
                e.printStackTrace();
            }
        }
    
        //返回在线用户名
        private Set<String> getNames(){
            return onlineUsers.keySet();
        }
    
        //收到消息
        @OnMessage
        public void onMessage(String message,Session session){
            //将数据转换成对象
            try {
                ObjectMapper mapper =new ObjectMapper();
                Message mess = mapper.readValue(message, Message.class);
                String toName = mess.getToName();
                String data = mess.getMessage();
                String username = (String) httpSession.getAttribute("user");
                String resultMessage = MessageUtils.getMessage(false, username, data);
                //发送数据
                onlineUsers.get(toName).session.getBasicRemote().sendText(resultMessage);
            } catch (Exception e) {
                e.printStackTrace();
            }
    
        }
        //关闭
        @OnClose
        public void onClose(Session session) {
            String username = (String) httpSession.getAttribute("user");
            //从容器中删除指定的用户
            onlineUsers.remove(username);
            MessageUtils.getMessage(true,null,getNames());
        }}

[WebSocket_ohana_-CSDN]: https://blog.csdn.net/qq_54773998/article/details/123863493?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168299896516782427455942%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=168299896516782427455942&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-2-123863493-null-null.142%5Ev86%5Einsert_down38v5,239%5Ev2%5Einsert_chatgpt&utm_term=websocket&spm=1018.2226.3001.4187
[01-websocket_bilibili]: https://www.bilibili.com/video/BV1r54y1D72U?p=1&vd_source=9497a07b4c66a69fcd28375760bc991e
[b81fec2eae1f449eabbebc7434dac2ed.png]: https://img-blog.csdnimg.cn/b81fec2eae1f449eabbebc7434dac2ed.png
[52b18431cf6f48a9beb7dce8f5aa74ef.png]: https://img-blog.csdnimg.cn/52b18431cf6f48a9beb7dce8f5aa74ef.png
[1189af879b74440da77060ea8ec74e18.png]: https://img-blog.csdnimg.cn/1189af879b74440da77060ea8ec74e18.png