模拟实现即时通讯聊天

最新推荐文章于 2025-05-28 09:26:38 发布

上帝喜欢糖

最新推荐文章于 2025-05-28 09:26:38 发布

阅读量288

点赞数 1

文章标签：前端 javascript vue.js

本文链接：https://blog.youkuaiyun.com/qq_20623665/article/details/129406665

版权

使用express来搭建简单后台

并配置监听事件，及中间件

使用socket.io插件来实现，用户与服务器的长连接


const express = require('express')

const app = express ()

const http = require('http').createServer(app)

const io = require('socket.io')(http,{cors:true})


io.on('connection',(socket)=>{
  console.log('连接成功');
  socket.on('messageJK' ,callback)
  socket.on('rose',roseCallback)
})
// index抛出事件，监听服务器接收
function callback(e){
    io.emit('message', e)
}

// 接收rose抛出事件，值
function roseCallback(e){
console.log(e);
// 服务器接收事件
io.emit('rose' , e)
}

// 错误
// io.on('message' , (e)=>{
//   console.log('message被触发');
// })

app.get('/login' , (req ,rep)=>{
  rep.json({
    code:1000,
    message:'OK'
  })
})


http.listen(3000 , ()=>{
  console.log("成功");
})

index用户的界面，连接成功会触发后台的connection，可以在控制台看到打印提示，同时自身监听connect也可以表示连接成功

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/socket.io/4.6.1/socket.io.js"></script>
  </head>
  <body>
    <input type="text" />
    <button id="btn">发送</button>
    <hr />
    <h1>index</h1>
    <ul class="ul"></ul>
    <script>
      const ulBox = document.querySelector('.ul')
      const btn = document.querySelector('#btn')
      const ipt = document.querySelector('input')

      const socket = io('http://127.0.0.1:3000')
      socket.on('connect', () => {
        console.log('服务器链接成功')
      })

      btn.addEventListener('click', () => {
        // console.log(ipt.value)
        // console.log(socket, '1111')
        socket.emit('messageJK', ipt.value)
        const lis = document.createElement('li')
        lis.innerHTML = ipt.value
        lis.style.color = 'green'
        ulBox.appendChild(lis)
      })

      socket.on('rose', (e) => {
        console.log(e, 'rose')
        const lis = document.createElement('li')
        lis.innerHTML = e
        lis.style.color = 'red'
        ulBox.appendChild(lis)
      })
    </script>
  </body>
</html>

rose界面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/socket.io/4.6.1/socket.io.js"></script>
  </head>
  <body>
    <input type="text" id="ipt" />
    <button id="btn">回复</button>
    <hr />
    <h1>rose</h1>
    <ul class="ul"></ul>

    <script>
      const ulBox = document.querySelector('.ul')
      const btn = document.querySelector('#btn')
      const ipt = document.querySelector('#ipt')
      // 长链接服务器
      const socket = io('http://127.0.0.1:3000')
      // 连接默认connect--打印连接成功
      socket.on('connect', () => {
        console.log('ok', '=======')
      })
      // 监听服务器端抛出的message事件
      socket.on('message', (e) => {
        console.log(e, '=======')
        const lis = document.createElement('li')
        lis.innerHTML = e
        lis.style.color = 'red'
        ulBox.appendChild(lis)
      })
      // 监听点击事件
      btn.addEventListener('click', () => {
        console.log(ipt.value)
        // 使用websocket，抛出事件-服务器接收值
        socket.emit('rose', ipt.value)
        const lis = document.createElement('li')
        lis.innerHTML = ipt.value
        lis.style.color = 'green'
        ulBox.appendChild(lis)
      })
    </script>
  </body>
</html>

实现效果