SpringBoot+WebSocket群聊功能完整代码实例

最新推荐文章于 2024-08-07 09:44:52 发布

今天又是努力的一天

最新推荐文章于 2024-08-07 09:44:52 发布

阅读量2.1k

点赞数 1

文章标签： websocket spring boot 网络协议

本文链接：https://blog.csdn.net/rows_com/article/details/122602396

版权

这里写自定义目录标题

效果图
准备条件
配置类
WebSocket相应类
前端代码

效果图

每一个浏览器打开都会生成一个随机数,当然你也可以通过ip来控制,目的是实现即时通讯的功能.
接下来的代码都是全部的代码,你可以直接拿过来用就行.终极目的是通过简单示例了解他的沟通过程
目前是群发广播,如果想要实现一对一聊天的话,就需要记录userid来区分用户进行广播.也就是点对点的即时通讯.入门建议先走一遍群发广播.

在这里插入图片描述

准备条件

Java首先引入maven-版本根据你的spring-boot版本就行

<!--websocket 即时通讯-->
<dependency>
       <groupId>org.springframework.boot</groupId>
       <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

配置类

准备config类直接复制就行

import org.springframework.context.annotation.Bean;
import org.springframework.http.server.ServerHttpRequest;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**
 * @author hanfeng
 * @date 2022/1/14
 */
@Component
public class WebSocketAutoConfig {

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

}

WebSocket相应类

此部分是从网上复制过来的比较简单,但我这个是用的jwt令牌鉴权的,所以还需要再写一套鉴权的过程代码,此处只是简单实现.

import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.util.concurrent.CopyOnWriteArraySet;

/**
 * @author hanfeng
 * @date 2022/1/19
 */
@Component
@ServerEndpoint ("/webSocket")
@Slf4j
public class WebSocket {

    private Session session;

    private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<>();

    @OnOpen
    public void onOpen(Session session) {
        this.session = session;
        //这里就是我们所提交的token
        //String submitedToken=session.getHandshakeHeaders().get("sec-websocket-protocol").get(0);
        webSocketSet.add(this);
        this.sendMessage("第一次回应消息");
        log.info("【websocket消息】有新的连接, 总数:{}", webSocketSet.size());
    }
    //https://my.oschina.net/xiedeshou/blog/1927371
    @OnClose
    public void onClose() {
        webSocketSet.remove(this);
        log.info("【websocket消息】连接断开, 总数:{}", webSocketSet.size());
    }

    @OnMessage
    public void onMessage(String message) {
        log.info("【websocket消息】收到客户端发来的消息:{}", message);
        this.sendMessage(message);
    }

    public void sendMessage(String message) {
        for (WebSocket webSocket : webSocketSet) {
            log.info("【websocket消息】广播消息, message={}", message);
            try {
                webSocket.session.getBasicRemote().sendText(message);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }

}

前端代码

前端代码之前不是这样,我做了一个小小的完善.

<html>
<head>
    <meta charset="UTF-8">
    <title>websocket测试</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style type="text/css">
        h3,h4{
            text-align:center;
        }
		#messageId{
			width:1070px;
			height:500px;
			margin:0 auto;
			border:1px solid #e5e5e5;
			  background: #ece9e6;
			  background: -webkit-linear-gradient(to bottom, #ffffff, #ece9e6); 
			  background: linear-gradient(to bottom, #ffffff, #ece9e6);
			padding:10px;
			overflow-y:auto;
		}
		#messageId p{
			margin-bottom:8px;
		}
		.wby{
			height:60px;
			resize:none;
			margin-top:10px;
			padding:10px;
		}
		.shuru{
			position:relative;
			width:1090px;
			margin:0 auto;
		}
		.sendMsg{
			position:absolute;
			right:5px;
			bottom:5px;
			width:60px;
			height:25px;
			line-height:25px;
			border:none;
			background-color:green;
			color:#fff;
			border-radius:5px;
		}
    </style>
</head>
<body>

<h3>WebSocket小组聊天室</h3>

<div id = "messageId"></div>
<form onsubmit="return false" action="##" id="formtest">
	<div class="shuru">
		<textarea class="wby" name="msg" cols="150" value="" onkeypress="BindEnter();"></textarea>
		<input class="sendMsg" type="button" value="发送" onclick="sendMessage()" >
	</div>
</form>

<script type="text/javascript" >
    var socket;
	var ceil = Math.ceil(Math.random()*10);
    if (typeof (WebSocket) == "undefined") {
        console.log("遗憾：您的浏览器不支持WebSocket");
    } else {
        console.log("恭喜：您的浏览器支持WebSocket");
        //实现化WebSocket对象
        //指定要连接的服务器地址与端口建立连接
        //注意ws、wss使用不同的端口。我使用自签名的证书测试，
        //无法使用wss，浏览器打开WebSocket时报错
        //ws对应http、wss对应https。
        socket = new WebSocket("ws://127.0.0.1:80/webSocket");
        //连接打开事件
        socket.onopen = function() {
            console.log("Socket 已打开");
            socket.send('<p style="color:#999;text-align:center;font-size:3px">'+ceil+"号:加入群聊"+'</p>');
        };
        //收到消息事件
        socket.onmessage = function(msg) {
            $("#messageId").append('<p style="font-size:15px">'+ msg.data+'</p>');
            console.log(msg.data);
        };
		 //发送消息事件
        socket.sendMessage = function(msg) {
			socket.send(ceil+"号: "+msg);
            $(".wby").val('');
        };
        //连接关闭事件
        socket.onclose = function() {
            console.log("Socket已关闭");
        };
        //发生了错误事件
        socket.onerror = function() {
            alert("Socket发生了错误");
        }
        //窗口关闭时，关闭连接
        window.unload=function() {
            socket.close();
        };
    }
	
	function sendMessage() {
		var msg = $("textarea[name='msg']").val();
		socket.sendMessage(msg);
	}
	
	function BindEnter(e){
		var evt  = window.event || e;
		if(evt.keyCode == 13){
			//回车事件
			var msg = $("textarea[name='msg']").val();
			socket.sendMessage(msg);
		}
	}
</script>

</body>
</html>