12 |
19 | );
20 | };
21 |
22 | export default ContactsBox;
23 |
--------------------------------------------------------------------------------
/xmpp-react-client/src/features/user/userSlice.js:
--------------------------------------------------------------------------------
1 | import { createSlice } from "@reduxjs/toolkit";
2 |
3 | const initialState = {
4 | username: null,
5 | loggedIn: false,
6 | };
7 |
8 | export const userSlice = createSlice({
9 | name: "user",
10 | initialState,
11 | reducers: {
12 | login: (state, action) => {
13 | state.username = action.payload;
14 | state.loggedIn = true;
15 | },
16 | logout: (state) => {
17 | state.username = null;
18 | state.loggedIn = false;
19 | },
20 | },
21 | });
22 |
23 | export const { login, logout } = userSlice.actions;
24 |
25 | export const selectUsername = (state) => state.user.username;
26 |
27 | export const selectLoggedIn = (state) => state.user.loggedIn;
28 |
29 | export default userSlice.reducer;
30 |
--------------------------------------------------------------------------------
/spring-xmpp-websocket-server/src/main/java/com/sergiomartinrubio/springxmppwebsocketsecurity/websocket/utils/MessageEncoder.java:
--------------------------------------------------------------------------------
1 | package com.sergiomartinrubio.springxmppwebsocketsecurity.websocket.utils;
2 |
3 | import com.google.gson.Gson;
4 | import com.sergiomartinrubio.springxmppwebsocketsecurity.model.WebsocketMessage;
5 | import jakarta.websocket.Encoder;
6 | import jakarta.websocket.EndpointConfig;
7 |
8 | public class MessageEncoder implements Encoder.Text-
14 | {contacts.map((name, index) => (
15 |
24 |
25 |
31 | {name}
26 |
27 | left 7 mins ago
28 |
29 | {/* online
*/}
30 |
41 |
42 | {time}, {date}
43 |
44 |
45 | {content}
46 |
25 |
26 | Welcome {capitalize(user.username)}
27 |
28 |
31 |
32 |
33 |
34 |
45 | );
46 | };
47 |
48 | export default Home;
49 |
--------------------------------------------------------------------------------
/spring-xmpp-websocket-server/src/main/java/com/sergiomartinrubio/springxmppwebsocketsecurity/xmpp/XMPPMessageTransmitter.java:
--------------------------------------------------------------------------------
1 | package com.sergiomartinrubio.springxmppwebsocketsecurity.xmpp;
2 |
3 | import com.sergiomartinrubio.springxmppwebsocketsecurity.model.WebsocketMessage;
4 | import com.sergiomartinrubio.springxmppwebsocketsecurity.websocket.utils.WebSocketTextMessageHelper;
5 | import jakarta.websocket.Session;
6 | import lombok.RequiredArgsConstructor;
7 | import lombok.extern.slf4j.Slf4j;
8 | import org.jivesoftware.smack.packet.Message;
9 | import org.springframework.stereotype.Component;
10 |
11 | import static com.sergiomartinrubio.springxmppwebsocketsecurity.model.MessageType.NEW_MESSAGE;
12 |
13 | @Slf4j
14 | @Component
15 | @RequiredArgsConstructor
16 | public class XMPPMessageTransmitter {
17 |
18 | private final WebSocketTextMessageHelper webSocketTextMessageHelper;
19 |
20 | public void sendResponse(Message message, Session session) {
21 | log.info("New message from '{}' to '{}': {}", message.getFrom(), message.getTo(), message.getBody());
22 | String messageFrom = message.getFrom().getLocalpartOrNull().toString();
23 | String to = message.getTo().getLocalpartOrNull().toString();
24 | String content = message.getBody();
25 | webSocketTextMessageHelper.send(
26 | session,
27 | WebsocketMessage.builder()
28 | .from(messageFrom)
29 | .to(to)
30 | .content(content)
31 | .messageType(NEW_MESSAGE).build()
32 | );
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/xmpp-react-client/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 |
35 |
44 |
36 |
43 |
37 |
42 |
38 |
41 |
34 |
60 | );
61 | };
62 |
63 | export default ChatBox;
64 |
--------------------------------------------------------------------------------
/spring-xmpp-websocket-server/src/main/java/com/sergiomartinrubio/springxmppwebsocketsecurity/websocket/ChatWebSocket.java:
--------------------------------------------------------------------------------
1 | package com.sergiomartinrubio.springxmppwebsocketsecurity.websocket;
2 |
3 | import com.sergiomartinrubio.springxmppwebsocketsecurity.config.SpringContext;
4 | import com.sergiomartinrubio.springxmppwebsocketsecurity.facade.XMPPFacade;
5 | import com.sergiomartinrubio.springxmppwebsocketsecurity.model.WebsocketMessage;
6 | import com.sergiomartinrubio.springxmppwebsocketsecurity.websocket.utils.MessageDecoder;
7 | import com.sergiomartinrubio.springxmppwebsocketsecurity.websocket.utils.MessageEncoder;
8 | import jakarta.websocket.*;
9 | import jakarta.websocket.server.PathParam;
10 | import jakarta.websocket.server.ServerEndpoint;
11 | import lombok.extern.slf4j.Slf4j;
12 |
13 |
14 | @Slf4j
15 | @ServerEndpoint(value = "/chat/{username}/{password}", decoders = MessageDecoder.class, encoders = MessageEncoder.class)
16 | public class ChatWebSocket {
17 |
18 | private final XMPPFacade xmppFacade;
19 |
20 | public ChatWebSocket() {
21 | this.xmppFacade = (XMPPFacade) SpringContext.getApplicationContext().getBean("XMPPFacade");
22 | }
23 |
24 | @OnOpen
25 | public void open(Session session, @PathParam("username") String username, @PathParam("password") String password) {
26 | log.info("Starting XMPP session '{}'.", session.getId());
27 | xmppFacade.startSession(session, username, password);
28 | }
29 |
30 | @OnMessage
31 | public void handleMessage(WebsocketMessage message, Session session) {
32 | log.info("Sending message for session '{}'.", session.getId());
33 | xmppFacade.sendMessage(message, session);
34 | log.info("Message sent for session '{}'.", session.getId());
35 | }
36 |
37 | @OnClose
38 | public void close(Session session) {
39 | xmppFacade.disconnect(session);
40 | }
41 |
42 | @OnError
43 | public void onError(Throwable e, Session session) {
44 | log.warn("Something went wrong.", e);
45 | xmppFacade.disconnect(session);
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/xmpp-react-client/src/features/messages/TypingArea.js:
--------------------------------------------------------------------------------
1 | import PropTypes from "prop-types";
2 | import React, { useState } from "react";
3 | import { useSelector } from "react-redux";
4 | import { selectCurrent } from "../current/currentSlice";
5 | import { selectUsername } from "../user/userSlice";
6 | import { addMessage } from "./messagesSlice";
7 | import { newMessage } from "./typingAreaActions";
8 |
9 | const TypingArea = ({ dispatch }) => {
10 | const [content, setContent] = useState("");
11 |
12 | const user = useSelector(selectUsername);
13 |
14 | const currentContact = useSelector(selectCurrent);
15 |
16 | const handleMessage = () => {
17 | const msg = {
18 | from: user.username,
19 | to: currentContact,
20 | content: content,
21 | messageType: "NEW_MESSAGE",
22 | };
23 | const msgSent = {
24 | from: user.username,
25 | to: currentContact,
26 | content: content,
27 | };
28 | setContent("");
29 | dispatch(addMessage(msgSent));
30 | dispatch(newMessage(msg));
31 | };
32 |
33 | const onKeyDown = (event) => {
34 | if (event.key === "Enter") {
35 | handleMessage();
36 | }
37 | };
38 |
39 | const validateForm = () => {
40 | return content.length > 0;
41 | };
42 |
43 | return (
44 |
35 |
49 |
36 |
48 |
37 | 
41 |
47 |
41 |
42 |
45 |
46 | {currentContact}
43 | Last seen: 2 hours ago 44 |
50 |
58 | -
51 | {messages.map((message) => (
52 |
53 |
55 | ))}
56 |
45 |
66 | );
67 | };
68 |
69 | TypingArea.propTypes = {
70 | dispatch: PropTypes.func.isRequired,
71 | };
72 |
73 | export default TypingArea;
74 |
--------------------------------------------------------------------------------
/xmpp-react-client/src/features/user/Login.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import {
3 | Alert,
4 | Button,
5 | Container,
6 | FormControl,
7 | FormGroup,
8 | FormLabel,
9 | Jumbotron,
10 | } from "react-bootstrap";
11 | import { useSelector } from "react-redux";
12 | import { wsConnect } from "../../common/middleware/websocketActions";
13 | import { selectAlert } from "../alert/alertSlice";
14 |
15 | // use rfce to generate component quickly
16 | const Login = ({ dispatch }) => {
17 | const [username, setUsername] = useState("");
18 | const [password, setPassword] = useState("");
19 |
20 | const validateForm = () => {
21 | return username.length > 0 && password.length > 0;
22 | };
23 |
24 | const handleSubmit = (e) => {
25 | e.preventDefault();
26 | dispatch(wsConnect(username, password));
27 | };
28 |
29 | const alert = useSelector(selectAlert);
30 |
31 | return (
32 |
46 |
65 |
47 |
55 |
56 | setContent(e.target.value)}
61 | onKeyDown={onKeyDown}
62 | placeholder="Enter text here..."
63 | />
64 |
33 |
34 |
35 |
37 |
38 |
39 |
79 |
80 | );
81 | };
82 |
83 | export default Login;
84 |
--------------------------------------------------------------------------------
/spring-xmpp-websocket-server/pom.xml:
--------------------------------------------------------------------------------
1 |
2 | Login Here 🚪
36 |
47 | {alert ? (
48 | {alert.message}
49 | ) : (
50 |
51 | )}
52 |
53 |
78 |