This project is the client-side companion to the Java 17 WebSockets and MySQL backend.
Copyright 2024-2025 Zhongheng Liu
This repository stores code that partially comprises the IRC chat project. This is an A-Level Edexcel Level 3 Extended Project Qualification in the form of an Artifact. Its purpose is to create a convenient self-hosted IRC chat solution, with HTTPS encrypted text transfer and end-to-end SSH asymmetric key-exchange, encrypt-decrypt functions to ensure that the messages uploaded and downloaded are anomynous and untrackable.
It hopes to produce an aesthetically-pleasing and modern-looking interface through the use of a combination of HTML, JavaScript/TypeScript logic, and CSS formatting to create an interactible UI/UX for users of the application to communicate with each other through a server that acts as the message broker between 2 or more parties through the use of the STOMP library and the WebSockets protocol.
The skeleton code of the epq-web project is first generated by the command npx create-react-app <directory> --template typescript, by incorporating TypeScript support into the project, easy access to static type-checking is granted, providing for a more efficient debugging process, since common errors such as type mismatchs will be detected first instead of during the build-and-production cycle.
which produced a directory tree structure similar to the following:
<directory root>
├── node_modules
│ ├── ...
├── package.json
├── package-lock.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── README.md
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
├── reportWebVitals.js
└── setupTests.js
3 directories, 17 files (ignored node_modules/*)
This part of the EPQ artifact creation process utilized predominantly 3 libraries. It involved ReactJS, TypeScript, @types/* type notation libraries, and most crucially the underlying Node.js application structure.
Of this newly created tree structure, most of the code encapsulated within the generated files are redundant and are immediately purged from the repository. The file /package.json auto-generated by npm documents the libraries that are imported throughout the project, tracking its dependencies. The actual development of the software required 1 more library called StompJS.
STOMP is the name of a protocol that allowed clients to talk to each other using plaintext JSON and WebSockets technology. It also provides an interface for WebSocket (aka. an abstraction from the functions provided by the SockJS library).
React JS is a JavaScript library, through the use of which a dynamically updated, efficient, and most crucially state-controlled application may be developed. It is most commonly utilised for the development of single-page applications. For the purposes of this application, it is used to encapsulate and instantiate dynamic React elements for re-use in code. JSX syntax is used which can make incorporating JavaScript into HTML code easier to handle for the React library. In the newest standard, functional components are recommended for a more concise and hook-centric way of writing applications.
A React hook in use for a functional component can be defined as similar to this syntax:
export function Component({ ...props }: PropType) {
const [state, setState] = useState<StateType>(undefined);
return (
<div id="App">
<h1>Title</h1>
</div>
);
}The example above is a React functional component with TypeScript type notations. State variables such as the one defined in the Component invoke a page re-render each time the state is updated. This is done though the setState() function which acts as a state-setter returned by the useState hook, as provided for by the React library.
Another function of React used in this project is useEffect and useContext. Due to components being dependent on prop inputs and state variables, it may be considered inefficient to provide additional parameters for global variables such as language information to the child components through their specific inclusion into the child's props. It is for this reason that the useContext hook is used to provide context for certain dependencies that are known to be required for most, if not all, of the components in the page.
For this project specifically, useContext is used as a global user and language context provider, such that the page refreshes each time such settings are changed. For example, early on it is found that the STOMP connection is disconnected each time a new message is collected, because as the page refreshes, the code that establishes a STOMP connection to the server is terminated each time, causing the connection to fail.
As it has been found out later in the development process, the useEffect hook could be used to change the procedure such that, by defining an empty array of dependencies for which the code is cleaned up and re-run, the code that instantiates the STOMP connection is not terminated and re-run following each page update.
JavaScript is considered as a weakly-typed language. By being weakly-typed largely scripting language, there is a significant chance that, due to the potential for malicious or malformed requests and operations, the entire webpage may suddenly stop working, while there was no warning during development, and a problem is only detected during runtime, a time by which a problem may turn out to be significantly harder to resolve, compared to if it was detected as the code was being written.
By explicitly defining and performing operations on datatypes in TypeScript, type annotations act as a sort of safety net for your code such that invalid data structures are immediately detected and analysed, ensuring that your TS code cannot pass the TSC compiler if it has type annotation-related issues. This makes issues surface earlier in the development process and can make for a large increase in productivity when developing an application, also ensuring more secure and well-written applications could be made.
Lorem ipsum
Lorem ipsum
This project is licensed under the MIT License, found under /LICENSE.