当前位置：网站首页>Websocket chat

Websocket chat

2022-07-28 14:06:00 【cc＆】

1. Start the backend program （ In the uploaded resources ）

2. Front page introduction js

3. Write page 

<!DOCTYPE html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      body {
        margin: 0;
        padding-bottom: 3rem;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          Helvetica, Arial, sans-serif;
      }

      #form {
        background: rgba(0, 0, 0, 0.15);
        padding: 0.25rem;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        height: 3rem;
        box-sizing: border-box;
        backdrop-filter: blur(10px);
      }
      #input {
        border: none;
        padding: 0 1rem;
        flex-grow: 1;
        border-radius: 2rem;
        margin: 0.25rem;
      }
      #input:focus {
        outline: none;
      }
      #form > button {
        background: #333;
        border: none;
        padding: 0 1rem;
        margin: 0.25rem;
        border-radius: 3px;
        outline: none;
        color: #fff;
      }

      #messages {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }
      #messages > li {
        padding: 0.5rem 1rem;
      }
      #messages > li:nth-child(odd) {
        background: #efefef;
      }
    </style>
  </head>
  <body>
    <ul id="messages"></ul>
    <form id="form" action="">
      <input id="input" autocomplete="off" /><button>Send</button>
    </form>
  </body>
   <script src="./socket.io.min.js"></script>
   <script>

    //  Get the element 
    const ul=document.querySelector('#messages')
    const form=document.querySelector('#form')
    const input=document.querySelector('#input')

    //  Link to the server 
    let socket=io('ws://localhost:3000')

    //  Send a message 
    form.addEventListener('submit',(e)=>{
        e.preventDefault()
        const value=input.value
        if(value){ 
       //  Submit data to server 
        socket.emit('chat message',value)}
       
    })

    //  receive messages 
    socket.on('chat message',(data)=>{
        console.log(data);
        ul.innerHTML+=`<li>${data}</li>`
        //  The page scrolls automatically 
        window.scrollTo(0,document.scrollHeight)
    })
   </script>
</html>

 

原网站

版权声明
本文为[cc＆]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/209/202207281308357897.html

边栏推荐

猜你喜欢

随机推荐