javascript - 使用没有客户端代码 SockJS 的服务器端(Spring WebSocket)
问题描述
我正在使用 Spring Boot MVC 和安全性。现在我想使用 Spring WebSocket,例如,创建一个聊天。但是我可以将 JS 客户端代码写到服务器端吗?
当用户登录到他有JSESSION的站点时,当他单击连接按钮时,他调用STOMP的connect()方法进行订阅,STOMP使用服务器发出的JSESSION。我可以将此连接写入我的应用程序的服务器端吗?为什么在客户端再次使用重复连接?
我希望当用户发送一条消息时,服务器了解调用了什么 JS 方法并向订阅该主题的所有用户显示消息的容器(HTML)。
此外,当页面重新加载时,我windows.onload
会再次创建连接。
我想将此代码用于服务器端 TT:
<script type="text/javascript">
var stompClient = null;
window.onload = function ( ) {
connect();
}
function setConnected(connected) {
document.getElementById('connect').disabled = connected;
document.getElementById('disconnect').disabled = !connected;
document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
document.getElementById('response').innerHTML = '';
}
function connect() {
const socket = new SockJS('/hello');
stompClient = Stomp.over(socket);
stompClient.connect({}, function(frame) {
setConnected(true);
console.log('Connected: ' + frame);
stompClient.subscribe('/topic/greetings', function (outmessage) {
const content = JSON.parse(outmessage.body).messageEntity.content;
const time = JSON.parse(outmessage.body).messageEntity.date_create;
const date = JSON.parse(outmessage.body).messageEntity.date;
const user_name = JSON.parse(outmessage.body).userEntity.user_name;
const user_avat = JSON.parse(outmessage.body).userEntity.user_avatar;
showGreeting(content, user_name, time, date, user_avat);
});
});
}
function disconnect() {
stompClient.disconnect();
setConnected(false);
console.log("Disconnected");
}
function sendMessage() {
const message = document.getElementById('text').value;
stompClient.send("/app/hello", {}, JSON.stringify({ 'text': message }));
}
function showGreeting (message, user_name, date_time, date, avatar) {
const ul = document.getElementById('ul-message');
const li = document.createElement('li');
const p_mes = document.createElement('p');
const p_user = document.createElement('p');
const p_time = document.createElement('p');
const div_container = document.createElement('div');
const img_chat_ava = document.createElement('img');
const div_chat_name = document.createElement('div');
const div_chat_mess = document.createElement('div');
const div_chat_time = document.createElement('div');
img_chat_ava.src = avatar;
div_container.classList.add("message-container");
div_chat_mess.classList.add("message");
div_chat_time.classList.add("message-time");
div_chat_name.classList.add("chat-name");
img_chat_ava.classList.add("avatar");
li.appendChild(div_container);
div_container.appendChild(img_chat_ava);
div_container.appendChild(div_chat_name);
div_container.appendChild(div_chat_mess);
div_container.appendChild(div_chat_time);
p_mes.style.wordWrap = 'break-word';
p_mes.appendChild(document.createTextNode(message));
p_user.appendChild(document.createTextNode(user_name));
p_time.appendChild(document.createTextNode(date_time + " " + date));
div_chat_mess.appendChild(p_mes);
div_chat_name.appendChild(p_user);
div_chat_time.appendChild(p_time);
ul.appendChild(li);
}
</script>
解决方案
推荐阅读
- scala - 在 Scala 中,什么时候需要指定惰性?
- java - 检索 Firebase 数据库数据并制作列表
- ruby-on-rails - 我如何在rails中绘制利润损失图
- mysql - 带有日期范围的 MySQL 期初期末余额
- cmd - 使用 CMD、软件或类似工具自动设置文件夹中每个文件的创建日期以自动调整其自己的“最后修改”日期
- node.js - 类型错误:localizify.add 不是函数
- angular - 客户是否可以在 Angular 中查看我的 TypeScript 类并在部署后更改它们?
- python - 使用 OpenCV 的 imread 和 imdecode 时,同一肖像图像的形状不同
- reactjs - 如何在 MUIdatatble ReactJs 中只循环行而不是表
- ionic-framework - Ionic 3 应用内浏览器执行脚本错误