java聊天室WebSocket 结合Springboot +maven 教程

缺乏、安全感 2022-03-17 14:28 453阅读 0赞

## 实现的最终效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxODkyNjI4MjE3_size_16_color_FFFFFF_t_70]

## 1.websocket原理 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxODkyNjI4MjE3_size_16_color_FFFFFF_t_70 1]  
前端通过订阅 相应的URL。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxODkyNjI4MjE3_size_16_color_FFFFFF_t_70 2]

## js 代码部分 ##

var stompClient = null;

function connect() \{  
var socket = new SockJS(’/endpoint-websocket’);  
stompClient = Stomp.over(socket);  
stompClient.connect(\{\}, function (frame) \{  
setConnected(true);  
console.log('Connected: ’ + frame);

//订阅群聊消息
        stompClient.subscribe('/topic/chat', function (result) {
        	showContent(JSON.parse(result.body));
        });
        
        //订阅在线用户消息
        stompClient.subscribe('/topic/onlineuser', function (result) {
        	showOnlieUser(JSON.parse(result.body));
        });
        
        
    });

//断开连接  
function disconnect() \{  
if (stompClient !== null) \{  
stompClient.disconnect();  
\}  
setConnected(false);  
console.log(“Disconnected”);  
\}

//发送聊天记录  
function sendContent() \{  
stompClient.send("/app/v6/chat", \{\}, JSON.stringify(\{‘content’: $("\#content").val()\}));

//显示聊天记录  
function showContent(body) \{  
$("\#record").append("" + body.content + " “+new Date(body.time).toLocaleTimeString()+”");  
\}

//显示实时在线用户  
function showOnlieUser(body) \{  
$("\#online").html("" + body.content + " “+new Date(body.time).toLocaleTimeString()+”");  
\}

$(function () \{

connect();//自动上线
    
    $("form").on('submit', function (e) {
        e.preventDefault();
    });
     
    $( "#disconnect" ).click(function() { disconnect(); });
    $( "#send" ).click(function() {
    	sendContent(); 
    });

\});

## 2.后端必不可少的webstocket配置 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxODkyNjI4MjE3_size_16_color_FFFFFF_t_70 3]  
前端**发送**的通过js函数  
![在这里插入图片描述][2019022422191370.png]  
前端**接收**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxODkyNjI4MjE3_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][20190224222142615.png]

后端接收  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxODkyNjI4MjE3_size_16_color_FFFFFF_t_70 5]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxODkyNjI4MjE3_size_16_color_FFFFFF_t_70]: /images/20220317/eacabda47d3e402f9a573bc2cbb46325.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxODkyNjI4MjE3_size_16_color_FFFFFF_t_70 1]: /images/20220317/a8f7d3a0e5b04d308da3d78f1ba4b344.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxODkyNjI4MjE3_size_16_color_FFFFFF_t_70 2]: /images/20220317/6b6e88a3534f46838f3639777fedf44c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxODkyNjI4MjE3_size_16_color_FFFFFF_t_70 3]: /images/20220317/699f6c91b7074be6b951b3293fa12c05.png
[2019022422191370.png]: /images/20220317/e3ee0c108275419b81669d467335912a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxODkyNjI4MjE3_size_16_color_FFFFFF_t_70 4]: /images/20220317/4736af044ea34cd19356676215fa367f.png
[20190224222142615.png]: /images/20220317/6751bca6205b4582ac8698fd18faaf8b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxODkyNjI4MjE3_size_16_color_FFFFFF_t_70 5]: /images/20220317/7987c72a44874b6e8358459ba2509dd7.png