webSocket聊天

最新推荐文章于 2024-05-31 19:09:15 发布

cc&

最新推荐文章于 2024-05-31 19:09:15 发布

阅读量38

点赞数

分类专栏：移动文章标签： websocket javascript 前端

移动专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.启动后端程序（在上传的资源中）

2.前端页面引入js

3.编写页面

<!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>

    // 得到元素
    const ul=document.querySelector('#messages')
    const form=document.querySelector('#form')
    const input=document.querySelector('#input')

    // 与服务器建立链接
    let socket=io('ws://localhost:3000')

    // 发送消息
    form.addEventListener('submit',(e)=>{
        e.preventDefault()
        const value=input.value
        if(value){ 
       // 提交数据到服务器
        socket.emit('chat message',value)}
       
    })

    // 接收消息
    socket.on('chat message',(data)=>{
        console.log(data);
        ul.innerHTML+=`<li>${data}</li>`
        // 页面自动滚动
        window.scrollTo(0,document.scrollHeight)
    })
   </script>
</html>