Breaking News: Grepper is joining You.com. Read the official announcement!

code to start a chat app

Sumit Rawal answered on May 15, 2023 Popularity 3/10 Helpfulness 1/10

answer code to start a chat app

code to start a chat app

Comment

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Chat Room</title>
    <script src="/webjars/sockjs-client/sockjs.min.js"></script>
    <script src="/webjars/stomp-websocket/stomp.min.js"></script>
    <script th:inline="javascript">
        var socket = new SockJS('/chat');
        var stompClient = Stomp.over(socket);
        stompClient.connect({}, function(frame) {
            console.log('Connected: ' + frame);
            stompClient.subscribe('/topic/messages', function(message) {
                var content = JSON.parse(message.body).content;
                var sender = JSON.parse(message.body).sender;
                var div = document.createElement('div');
                var text = document.createTextNode(sender + ': ' + content);
                div.appendChild(text);
                document.getElementById('messages').appendChild(div);
            });
        });
        function sendMessage() {
            var content = document.getElementById('content').value;
            var sender = document.getElementById('sender').value;
            var chatMessage = {
                content: content,
                sender: sender
            };
             var div = document.createElement('div');
                var text = document.createTextNode(sender + ': ' + content);
                div.appendChild(text);
                document.getElementById('messages').appendChild(div);
            stompClient.send('/app/chat', {}, JSON.stringify(chatMessage));
            document.getElementById('content').value = '';
        }
    </script>
</head>
<body>
<div id="messages"></div>
<div>
    <input type="text" id="sender" placeholder="Enter your name">
    <input type="text" id="content" placeholder="Enter your message">
    <button onclick="sendMessage()">Send</button>
</div>
</body>
</html>

Popularity 3/10 Helpfulness 1/10 Language typescript

Source: Grepper

Tags: chat typescript

Link to this answer
Share Copy Link

Contributed on May 15 2023

Sumit Rawal

0 Answers Avg Quality 2/10

code to start a chat app

Contents

More Related Answers

code to start a chat app

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.