1- // Create a WebSocket connection
21const socket = new WebSocket ( 'ws://localhost:8080' ) ;
32
4- // Get references to the message list and input field
53const messageList = document . getElementById ( 'messageList' ) ;
64const messageInput = document . getElementById ( 'messageInput' ) ;
75
8- // Event listener for when the connection is opened
96socket . addEventListener ( 'open' , ( event ) => {
107 console . log ( 'Connected to WebSocket server' ) ;
118} ) ;
129
13- // Event listener for messages from the server
1410socket . addEventListener ( 'message' , ( event ) => {
1511 console . log ( `Received from server: ${ event . data } ) ;
1612
1713 appendToList ( event . data ) ;
1814} ) ;
1915
20- // Event listener for when the connection is closed
2116socket . addEventListener ( 'close' , ( event ) => {
2217 if ( event . wasClean ) {
2318 console . log ( 'Connection closed cleanly' ) ;
@@ -26,28 +21,23 @@ socket.addEventListener('close', (event) => {
2621 }
2722} ) ;
2823
29- // Event listener for connection errors
3024socket . addEventListener ( 'error' , ( event ) => {
3125 console . error ( 'WebSocket error:' , event ) ;
3226} ) ;
3327
34- // Send a message to the server
3528function appendToList ( message ) {
36- // Create a new list item to display the message
3729 const listItem = document . createElement ( 'li' ) ;
3830 listItem . textContent = message ;
3931
40- // Append the list item to the message list
4132 messageList . appendChild ( listItem ) ;
4233
43- // Scroll to the bottom of the message list to show the latest message
4434 messageList . scrollTop = messageList . scrollHeight ;
4535}
36+ 4637function sendMessage ( ) {
4738 const message = messageInput . value ;
4839 socket . send ( message ) ;
4940
50- // Clear the input field after sending the message
5141 messageInput . value = '' ;
5242
5343 appendToList ( message ) ;
0 commit comments