Привет, люди. Я создал веб-форум. Вы можете увидеть это здесь: https://chatboard.page/
Что это такое?
Это Одностраничное приложение , созданное с помощью:
- Это
- Одностраничное приложение
- , созданное с помощью:
- Аутентификация JWT
- Веб-карман (Топать сообщениями)
- веб-пакет
- Пружинный ботинок
Это приложение представляет собой своего рода форум, который является 2ch + слабым. На этом форуме вы можете добавлять комментарии как анонимный пользователь на доску до 1000 комментариев, как в 2ch, но комментарии обновляются в режиме реального времени, как в Slack.
Иногда я использую интернет-форумы, такие как Reddit или 2ch. Но иногда, например, когда я играю в игру, я хочу, чтобы они обновлялись сами по себе. Разве ты не чувствуешь то же самое? Поэтому я создал это приложение.
Вы можете создавать свои доски, которые видны всем пользователям, отсюда:
В нем есть функция входа с аутентификацией JWT, но вы можете добавлять комментарии без входа в систему. Без входа в систему вы не сможете удалять комментарии, потому что трудно различать IP-пользователей. Возможно, позже я внедрю функцию удаления комментария по паролю, которая позволит пользователям IP удалять свои комментарии.
Одностраничное Приложение
Это приложение представляет собой одностраничное приложение. Википедия объясняет, что это такое, следующим образом:
Одностраничное приложение (SPA) – это веб-приложение или веб-сайт, который взаимодействует с пользователем путем динамической перезаписи текущей веб-страницы новыми данными с веб-сервера вместо метода по умолчанию, когда браузер загружает все новые страницы. Цель – более быстрые переходы, которые сделают веб-сайт более похожим на родное приложение.
Как говорится в этом, приложение имеет только одну html-страницу следующим образом:
ChatBoard
Вы можете видеть, что в приведенном выше html-файле есть тег с id="приложение" . В СПА-салоне, Vue.js динамически управляйте виртуальными домами в теге с id="приложение" для создания каждой страницы веб-приложения, что быстрее, чем операции с реальными домами.
Но преимущество одностраничного приложения заключается не только в быстрых операциях виртуального DOM.
Данные, которые необходимо извлечь из БД, передаются на стороне сервера (spring boot/java) в формате json . Итак, как только браузер загружает весь js/css при первом доступе, сервер должен передать необходимые данные в формате json для каждой страницы. Первая загрузка может быть более длительной, но после первой загрузки данные, которыми обмениваются пользователь и сервер, являются только json. Таким образом, обычно это происходит очень быстро после длительной первой загрузки.
Но на самом деле я создал не все компоненты Vue. Я использую Основной пользовательский интерфейс-Vue . Это шаблон дизайна с лицензией MIT, что означает, что вы можете использовать шаблон для своего бизнеса, если вы показываете их лицензию в своем приложении.
Контроллер для СПА
Как я уже объяснял, в SPA есть только html-страница, что означает html-файл (скажем, index.html ) должен принимать все запросы на получение/отправку для просмотра страницы (но кроме запросов на api/webscoket и т. Д.). Поэтому я создал контроллер, который получает все запросы, кроме запросов для api/websocket, следующим образом:
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class SpaController {
@RequestMapping(value = {"/{path:^(?!api|public|ws)[^\\.]*}", "/**/{path:^(?!api|public|ws).*}/{path:[^\\.]*}"})
public String get(){
return "index";
}
}
Этот контроллер принимает все запросы, которые не содержат “/api”, “/ws”, “/public” в пути, поэтому, например, “/public/css/test.css” не перенаправляется на index.html, но “/чат/подробности” перенаправляется на index.html, который имеет Vue.js и виртуальные домы.
Аутентификация JWT
JWT – это аббревиатура от “веб-токена JSON”. Это используется для управления сеансами входа пользователей. Обычно в MPA сеанс входа проверяется на достоверность при каждой загрузке страницы. Но поскольку в SPA есть только одна страница, вы не можете проверить действительность сеанса входа таким образом.
Поэтому я решил использовать аутентификацию JWT для управления сеансами входа пользователей. В конфигурации безопасности Spring boot вы можете видеть, что он проверяет действительность токена JWT в каждом http-запросе с помощью http.addfilterbefore(authenticationjwttokenfilter(), UsernamePasswordAuthenticationFilter.class); .
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http
.cors()
.and()
.csrf()
.csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse())
.and()
.authorizeRequests()
/** .... omitted .... **/
.and()
.httpBasic().disable();
// Add a filter to validate the tokens with every request
http.addFilterBefore(authenticationJwtTokenFilter(), UsernamePasswordAuthenticationFilter.class);
}
Вы можете увидеть множество руководств о том, как реализовать аутентификацию JWT, погуглив “jwt spring boot”.
Веб-карман
Что такое websocket?
WebSocket – это протокол, который обеспечивает связь между сервером и браузером. Он имеет преимущество перед RESTful HTTP, поскольку связь является как двунаправленной, так и в режиме реального времени. Это позволяет серверу уведомлять клиента в любое время вместо регулярного опроса клиента на предмет обновлений. — Вонаж – https://learn.vonage.com/blog/2018/10/08/create-websocket-server-spring-boot-dr/
Это приложение использует websocket, потому что чат с websocket можно легко реализовать с помощью Spring boot. Чтобы использовать websocket, мы должны определить конечную точку и посредника сообщений для websocket:
public class WebsocketConfig implements WebSocketMessageBrokerConfigurer {
private static final Logger logger = LoggerFactory.getLogger(WebsocketConfig.class);
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry
.addEndpoint("/ws")
.withSockJS();
}
@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
registry.setApplicationDestinationPrefixes("/app");
registry.enableSimpleBroker("/chat", "/queue"); // Enables a simple in-memory broker
// Use this for enabling a Full featured broker
/*
registry.enableStompBrokerRelay("/chat")
.setRelayHost("localhost")
.setRelayPort(61613)
.setClientLogin("guest")
.setClientPasscode("guest");
*/
}
}
Я использовал эти ссылки, чтобы узнать, как они работают:
- Я использовал эти ссылки, чтобы узнать, как они работают:
- Я использовал эти ссылки, чтобы узнать, как они работают:
Затем на стороне javascript мы можем подключиться к конечной точке примерно так:
this.stompClient = new Stomp.Client(connectionOption);
// https://stomp-js.github.io/guide/stompjs/using-stompjs-v5.html#create-a-stomp-client
// https://stomp-js.github.io/guide/stompjs/rx-stomp/ng2-stompjs/using-stomp-with-sockjs.html#example-with-stompjs
// Use 'wss://' for https, use 'ws://' for http connection.
// Also it seems '/websocket' after '/ws' is essential.
const wsUri = (window.location.protocol === 'https:' ? 'wss://' : 'ws://') +
window.location.host + '/ws/websocket';
console.log(wsUri);
const xsrf = this.getCookie("XSRF-TOKEN");
const connectionOption = {
brokerURL: wsUri,
connectHeaders: {
"X-XSRF-TOKEN": xsrf
},
debug: function (str) {
console.log(str);
},
reconnectDelay: 10000,
heartbeatIncoming: 4000,
heartbeatOutgoing: 4000,
};
this.stompClient = new Stomp.Client(connectionOption);
this.stompClient.onConnect = () => { /** Do something when websocket is connected **/ };
this.stompClient.onStompError = () => { /** Do something when there is error **/ };
this.stompClient.activate();
Эти две ссылки были очень полезны, чтобы узнать, как использовать клиент stomp:
- Эти две ссылки были очень полезны, чтобы узнать, как использовать клиент stomp:
- Эти две ссылки были очень полезны, чтобы узнать, как использовать клиент stomp:
Что я почувствовал после создания приложения
Веб-карман оказался сложнее, чем я думал.. Но в любом случае я закончил его.
Оригинал: “https://dev.to/lechatthecat/spa-with-springboot-jwt-vue-js-web-socket-48c4”