基于SpringBoot的websocket的多人聊天室项目

小赵呢

已于 2022-05-12 16:25:35 修改

阅读量2.9k

点赞数

分类专栏： java springboot 文章标签： spring boot

于 2022-04-24 17:50:07 首次发布

本文链接：https://blog.csdn.net/weixin_53227758/article/details/124388414

版权

java 同时被 2 个专栏收录

91 篇文章 1 订阅

订阅专栏

springboot

19 篇文章 1 订阅

订阅专栏

文章目录

1、websocket

什么是websocket？

WebSocket协议是基于TCP的一种新的网络协议。它实现了客户端与服务器全双工通信，学过计算机网络都知道，既然是全双工，就说明了服务器可以主动发送信息给客户端。这与我们的推送技术或者是多人在线聊天的功能不谋而合。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yoWfMl8Z-1650793746572)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220424162957940.png)]$

为什么不使用HTTP 协议呢？这是因为HTTP是单工通信，通信只能由客户端发起，客户端请求一下，服务器处理一下，这就太麻烦了。于是websocket应运而生。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R64QvAmL-1650793746573)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220424163024880.png)]$

下面我们就直接开始使用Springboot开始整合。以下案例都在我自己的电脑上测试成功，你可以根据自己的功能进行修改即可。

现在我们的需求是根据这个特点,实现一个多个人的聊天室

这是我们的项目结构

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Pt5PQdOK-1650793746573)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220424172712574.png)]$

使用步骤

1.引入依赖

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-websocket</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-thymeleaf</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
        <scope>runtime</scope>
        <optional>true</optional>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-configuration-processor</artifactId>
        <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>
</dependencies>

2.建立配置类

@Configuration
public class WebSocketConfig {

    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

3.业务层

因为代码比较多,核心代码为

/**
 * 建立成功连接调用的方法
 */
@OnOpen
public void onOpen(Session session, @PathParam("sid") String sid) {
    this.session = session;
    //如果有重复直接返回
    for (WebSocketServer item : webSocketSet) {
        if (Objects.equals(item.sid, sid)) {
            return;
        }
    }
    webSocketSet.add(this);         //加入set中
    this.sid = sid;
    addOnlineCount();               //在线人数加1
    try {
        sendMessage("conn_success");
        log.info("有新窗口开始监听:" + sid + "当前在线人数为:" + getOnlineCount());
    } catch (IOException e) {
        log.error("websocket IO Exception");
    }
}

/**
 * 收到客户端调用的方法
 */
@OnMessage
public void onMessage(String message, Session session) {
    log.info("来自窗口:" + sid + "的消息" + message);
    //群发消息
    for (WebSocketServer item : webSocketSet) {
        try {
            item.sendMessage("来自窗口:" + sid + "的消息" + message);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

public static void sendInfo(String message) {
    for (WebSocketServer item : webSocketSet) {
        try {
            log.info("推送消息到窗口:" + item.sid + ",推送内容为:" + message);
            item.sendMessage(message);
        } catch (IOException e) {
            throw new RuntimeException(e);
        }
    }
}

因为我们要建立多人的聊天室,那必须要区分,不同客户端的类型,于是我想到了可以用Web中的路径参数每一个路径参数相当于一个id,之后通过thymeleaf的渲染,使他的路径参数最终变化为WebSocket。

Web类

//页面请求
@GetMapping("/index/{user}")
public String socket(@PathVariable String user, Model model) {
    model.addAttribute("user",user);
    return "index";
}

HTML

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>Java后端WebSocket的Tomcat实现</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button onclick="create(value)" th:attr="value = ${user}">连接Socket</button>
<br/>
Welcome
<br/><input id="text" type="text"/>

<button onclick="send()">发送消息</button>
<hr/>
<button onclick="closeWebSocket()">关闭WebSocket连接</button>
<hr/>
<div id="message"></div>
</body>
<script type="text/javascript">
    function create(user) {
        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            //改成你的地址
            if (user == null) {
                websocket = new WebSocket("ws://localhost:8080/api/websocket/101");
                init(websocket)
            } else {
                websocket = new WebSocket("ws://localhost:8080/api/websocket/" + user);
                init(websocket)
            }
            setMessageInnerHTML(user + "连接成功");
            return websocket;
        } else {
            alert('当前浏览器 Not support websocket')
        }
    }

    function init(websocket){
        //连接发生错误的回调方法
        websocket.onerror = function () {
            setMessageInnerHTML("WebSocket连接发生错误");
        };

        //连接成功建立的回调方法
        websocket.onopen = function () {
            setMessageInnerHTML("WebSocket连接成功");
        }
        //接收到消息的回调方法
        websocket.onmessage = function (event) {
            console.log(event);
            setMessageInnerHTML(event.data);
        }

        //连接关闭的回调方法
        websocket.onclose = function () {
            setMessageInnerHTML("WebSocket连接关闭");
        }

        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
            closeWebSocket();
        }
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    //关闭WebSocket连接
    function closeWebSocket() {
        websocket.close();
    }

    //发送消息
    function send() {
        var message = document.getElementById('text').value;
        websocket.send('{"msg":"' + message + '"}');
    }
</script>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AIJwdazZ-1650793746573)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220424174125326.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8XEVhnom-1650793746574)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220424174111899.png)]

遇到的问题

ssage = document.getElementById(‘text’).value;
websocket.send(‘{“msg”:"’ + message + ‘"}’);
}

```

[外链图片转存中...(img-AIJwdazZ-1650793746573)]

[外链图片转存中...(img-8XEVhnom-1650793746574)]

项目github地址

项目地址

小赵呢

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
基于SpringBoot的websocket的多人聊天室项目

文章目录1、websocket什么是websocket？使用步骤1.引入依赖2.建立配置类3.业务层Web类HTML遇到的问题遇到的问题1、websocket什么是websocket？WebSocket协议是基于TCP的一种新的网络协议。它实现了客户端与服务器全双工通信，学过计算机网络都知道，既然是全双工，就说明了服务器可以主动发送信息给客户端。这与我们的推送技术或者是多人在线聊天的功能不谋而合。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yoWfMl8Z-1650
复制链接

扫一扫