socket.io在html中实现的群聊功能

最新推荐文章于 2024-07-18 19:54:29 发布

苹果电脑的鑫鑫

最新推荐文章于 2024-07-18 19:54:29 发布

阅读量336

点赞数 4

文章标签： html 前端

本文链接：https://blog.csdn.net/Wx001214/article/details/139622614

版权

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input id="msg"/><button id="btn">发送消息</button>


  <ul id="messages"></ul>

  <script src="http://localhost:3000/socket.io/socket.io.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script>
      // 1.当http服务和websocket协议 结合并开启服务以后，
      // 全局暴露了http://localhost:3000/socket.io/socket.io.js
      // 这个文件就是让前端htm1页面引入的全局暴露了一个io方法
      // console.log(io);
      //2.io方法就是连接websocket服务的

      let socket =  io("http://localhost:3000"); //返回一个连接对象

      socket.on('clientMsg',(msg)=>{
        // console.log( msg );  //已经连接上服务器
      })


      let messagesList = document.getElementById('messages');

      //监听服务器发送过来的消息
      socket.on('client2',(msg)=>{
        console.log( msg );


        let newMessage = document.createElement('li');
  newMessage.textContent = msg; // 设置消息内容

  // 将新消息追加到<ul>列表中
  messagesList.appendChild(newMessage);
       
      }) 



      //点击按钮发送信息
      $('#btn').on('click',function(){
        //向服务器发送(发射)要触发服务端的兼听事件。一句hello
        // console.log( socket )
        // socket.emit('事件名称',发送的消息 )
        //后端的事件  'houduanMsg'
        socket.emit('houduanMsg',$("#msg").val());
       })




  </script>
  
</body>
</html>


<!-- 【WebSocket通信合集-哔哩哔哩】 https://b23.tv/JwAm08q -->

后端

01server.js

const express = require("express")
const app = express()
const server = app.listen(3000)//执行完毕以后返四一个server服务对象

//1.要引入socket.io
// const webSocket = require('socket.io')
// const io =webSocket( server ) //返回一个io对象
const io=require('socket.io')( server)


//全局暴露了一个 /socket.io/socket.io.js 文件
//http://localhost:3000/socket.io/socket.io.js


//开发一个群聊
const path = require('path')


//因为是http协议
app.get('/index',(req,res)=>{
    // res.send('我是index路由')

    res.sendFile( path.join( __dirname,'01client.html'))
        
})


//on监听事件
io.on('connect',(socket)=>{  //socket：返回了个当前用户的连接对
    //connect:客户端连接服务器端的事件
    // console.log('客户端连接服务器成功')

    socket.emit('clientMsg',{m:"你好用户，你连接上了服务器"})



    //'houduanMsg' 监听信息的事件
    socket.on('houduanMsg',(msg)=>{//后端兼听前端触友的事件
        // console.log(msg);

        //每一个客户端都收到这句hel1o
    
        //io.sockets.emit :触发所有客户端的client2事件
       io.sockets.emit('client2',msg)

    })


     
})