i need a bootstrap 3 design for chat [closed]

Published

i want to add a chat system for my site laravel, using socket.io, everything works fine, it just remains design,i need a professional design.

 $(function(){
       let ip_adress = '127.0.0.1';
       let socket_port = '3000';
       let socket = io(ip_adress + ':' + socket_port);

       let chatInput = $('#chatInput');
       chatInput.keypress(function(e){
           let message = $(this).html();
           console.log(message);
           if(e.which === 13 && !e.shiftkey){
               socket.emit('sendChatToServer', message);
               chatInput.html('');
               return false;
           }
       });
       socket.on('sendChatToClient', (message) => {
           $('.chat-content ul').append(`<li>${message}</li>`);
       });
    });
   .chat-row {
        margin: 50px,
    }

    ul {
        margin : 0;
        padding : 0;
        list-style : none;
    }

    ul li {
        padding : 8px;
        background : #928787;
        margin-botton : 20px;
    }

    ul li:nth-child(2n-n) {
        background: #c3c5c5;
    }
    .chat-input {
        border: 1px solid lightgray;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        padding: 8px 10px;  
        color: #fff;  
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.socket.io/4.3.2/socket.io.min.js" integrity="sha384-KAZ4DtjNhLChOB/hxXuKqhMLYvx3b5MlT55xPEiNmREKRzeEm+RVPlTnAn0ajQNs" crossorigin="anonymous"></script>

<h1>view chat</h1>
<div class="container">
    <div class="row chat-row">
        <div class="chat-content">
            <ul>
                
            </ul>
        </div>
        <div class="chat-section">
            <div class="chat-box">
                <div class="chat-input bg-primary" id="chatInput" contenteditable="">

                </div>
            </div>
        </div>
    </div>
</div>

Source: Laravel

Published
Categorised as javascript, laravel, socket.io Tagged , ,

Answers

Leave a Reply

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq