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

最新推荐文章于 2024-07-06 13:28:40 发布

JleeHome

最新推荐文章于 2024-07-06 13:28:40 发布

阅读量930

点赞数

文章标签： java springboot websocket

本文链接：https://blog.csdn.net/qq892628217/article/details/87909010

版权

实现的最终效果

在这里插入图片描述

1.websocket原理

在这里插入图片描述
前端通过订阅相应的URL。

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(); 
});

});