精华内容
下载资源
问答
  • 即时聊天工具
    千次阅读
    2022-03-22 11:09:00

    实现简易的群聊天室

    进入对应的文件夹

    npm init -y  (将会生一个package.json描述当前项目的基本信息)
    # 安装socket.io
    npm install --save socket.io

    整理业务场景与实现思路:

    1. 实现群聊。

      1. 当打开群聊页面时,建立websocket连接,每当有客户端连接成功,即当做进入该群聊天室。

      2. 点击发送按钮,可将自己写的消息,发送给服务端,由服务端转发给聊天室的所有人。

      3. 客户端接收服务端返回的消息,显示在聊天记录列表中。

    2. 统计并更新在线人数。

      1. 在服务端维护一个全局变量:count=0;用于表示当前在线人数。

      2. 服务端一旦监听到客户端连接成功,count++

      3. 服务端一旦监听到客户端连接断开,count--

      4. 只要count一有变化,就需要向所有客户端发消息(countmsg),更新在线人数。

      5. 客户端接收countmsg消息,更新人数即可。

    服务器端 node.js

    // 引入相关模块   监听客户端的连接
    const http = require('http').createServer()
    const socketio = require('socket.io')(http, { 
        cors: {  origin:'*' }  // 允许所有域名访问  
    })
    
    let count = 0
    // 监听连接的建立
    socketio.on('connection', function(socket){
        console.log('有客户端进来了:' + socket.id)
        
        // 更新在线人数
        count++
        socketio.emit('countmsg', count)
        // 监听socket的断开,一旦连接断开,则count--
        socket.on('disconnect', function(){
            count--
            socketio.emit('countmsg', count)
        })
    
        // 监听客户端发过来的消息
        socket.on('textmsg', function(data){
            socketio.emit('textmsg', data)   // 收到什么就给所有客户端都发一遍
        })
    })
    
    http.listen(5050, ()=>{
        console.log('服务器已启动...')
    })

    服务器端完成以后接下来就是我们的客户端,我们可以先准备一个登录页面,让用户注册自己的昵称,代码如下

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>微信聊天室</title>
            <link rel="stylesheet" href="styles/normalize.css">
            <link rel="stylesheet" href="styles/reset.css">
            <link rel="stylesheet" href="styles/chart.css">
        </head>
        <body>
            <div id="login-container">
                <div class="login-title">微信聊天室</div>
                <div class="login-user-icon">
                    <img src="images/login.png" alt="">
                </div>
                <div>
                    <input type="text" id="username" class="login-item login-username" placeholder="请输入聊天昵称">
                </div>
                <div>
                    <input type="button" id="login" class="login-item login-button" value="登录">
                </div>
            </div>
            <script>
                login.onclick = function(){
                    // 准备name与avatar名
                    let name = username.value
                    let avatar = Math.floor(Math.random()*100)+".jpg"
                    window.location = `chart.html?name=${name}&avatar=${avatar}`
                }
            </script>
        </body>
    </html>
    
    

     运行结果如下

    用户登录以后就可以来到聊天界面进行聊天

    如果用户没有注册昵就直接打开聊天界面就会跳转到登录页面

    打开两个聊天室,进行检测

     

     聊天页面的代码如下

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>微信聊天室</title>
        <link rel="stylesheet" href="styles/normalize.css" />
        <link rel="stylesheet" href="styles/reset.css" />
        <link rel="stylesheet" href="styles/chart.css" />
      </head>
      <body>
        <div id="chart-container">
          <div class="chart-user-list" id="chart-user-list">
            <div class="user-item">
              <img src="images/avatar/15.jpg" alt="" />
              未知名
            </div>
          </div>
          <div class="chart-main-area">
            <div class="chart-main-title">
              <h1>
                微信聊天室(<span id="userNumber"></span>人)-<span
                  id="currentUser"
                ></span>
              </h1>
            </div>
            <div class="chart-list" id="chart-list">
              <!-- <div class="user-logined" id="user-logined"><span id="logined-user"></span>上线了</div> -->
              <!-- <div class="chart-item">
                            <div class="user-face"><img src="images/avatar/11.jpg" alt=""></div>
                            <div class="user-message">111</div>
                        </div> -->
            </div>
            <div class="chart-form">
              <div>
                <textarea class="chart-form-message" id="message"></textarea>
              </div>
              <div>
                <input
                  type="button"
                  id="send"
                  class="chart-form-send"
                  value="发表"
                />
              </div>
            </div>
          </div>
        </div>
        <script src="scripts/socket.io.js"></script>
        <script>
          // 判断,如果不是登录过来的,则跳转回登录页面
          let search = decodeURI(window.location.search) // 拿到浏览器地址栏的查询字符串
          if (!search) {
            window.location = 'index.html'
          }
          let name = search.split('&')[0].split('=')[1]
          let avatar = search.split('&')[1].split('=')[1]
          console.log(`name:${name}    avatar:${avatar}`)
          // 更新页面中的头像与昵称
          let userInfoDiv = document.getElementById('chart-user-list')
          userInfoDiv.innerHTML = `<div class="user-item">
                <img src="images/avatar/${avatar}" alt="">
                ${name}
            </div>`
    
          // 建立websocket连接
          let socket = io('http://127.0.0.1:8081')
          console.log('连接成功', socket)
    
          // 监听服务端返回的更新人数的消息
          socket.on('countmsg', function (data) {
            userNumber.innerHTML = data //更新span,显示最新的人数
          })
    
          // 监听服务端返回的消息
          socket.on('textmsg', function (data) {
            console.log('服务端发回:', data)
            // 追加到聊天记录列表中
            let list = document.getElementById('chart-list')
            let html = list.innerHTML
            html += `<div class="chart-item">
                    <div class="user-face"><img src="images/avatar/${data.avatar}" alt=""></div>
                    <div style="font-size:0.9em;">${data.name}</div>
                    <div class="user-message">${data.content}</div>
                </div>`
            list.innerHTML = html
            // dom操作,使list的滚动条持续在底部
            list.scrollTop = list.scrollHeight
          })
    
          // 点击发表按钮,发送消息
          send.onclick = function () {
            if (message.value && message.value.length < 30)
              //发送消息 {content:xx, name:xx, avatar:xx}
              socket.emit('textmsg', {
                content: message.value,
                name,
                avatar,
              })
            message.value = ''
          }
        </script>
      </body>
    </html>
    

    更多相关内容
  • 人工智能-项目实践-即时聊天-使用PHP+Swoole实现的网页即时聊天工具 使用PHP+Swoole4实现的网页即时聊天工具,在线体验地址:http://webim.swoole.com/ 基于Swoole4协程实现,可以同时支持数百万TCP连接在线 基于...
  • 即时聊天工具

    2013-05-13 10:45:51
    用java开发的聊天工具,有用户登录,注册,能够实现群聊天,私聊,功能还可以。
  • ZX Messenger是一个面向局域网、互联网的即时聊天工具,它专门针对学校及企业内部的网络通讯而开发的。ZX Messenger除了具有一般聊天工具都有的基础功能以外,还有自定义表情符等高级功能,使用简单,服务器无需特别...
  • 使用PHP + Swoole4实现的网页即时聊天工具,在线体验地址: : Swoole4 基于Swoole4协程实现,可以同时支持数百万TCP连接在线 基于WebSocket + Http Comet支持所有浏览器/客户端/移动端 支持单聊/群聊/组聊等功能 ...
  • 即时聊天工具源码

    2012-11-03 11:46:53
    即时聊天工具,是大家常用到的工具,是你不错的选择.
  • 即时聊天工具APP原生源码
  • Android 开发即时聊天工具 YQ 1.1 (带数据库) Android 开发即时聊天工具 YQ ,仿QQ,实现网络即时聊天。 100%可以运行
  • GW_Socket_JAVA 简单实现了socket服务器/客户端demo 具有群聊和单人聊天的功能
  • 即时聊天工具vb即时聊天工具vb即时聊天工具vb
  • 米聊PC版体验评测- 简约过头的即时聊天工具.docx
  • Android开发即时聊天工具(三)实现登陆功能[借鉴].pdf
  • socket即时网络通信工具,服务端客户端都有,详细注释
  • Intergram – 使用Telegram messenger的免费即时聊天工具,你可以很容易地添加到你的网站。它会让你和你的网站访问者使用Telegram messenger聊天
  • 类似于QQ的简易聊天工具,QQ的主要通信功能以实现,适合新手练习的,
  • websocket即时聊天工具前端技术栈:react+redux+immutable.js+Material-Ui后端技术栈:koa2+mysqlnpm start 前端项目启动npm service 后端服务启动npm run build 项目打包tips:本地开发,先 npm run server 启动后端...
  • 用c#开发的即时聊天工具(仿qq基本功能:聊天,传文件),同时集成了在线办公系统。该版本文件传输已无法使用,请在下面地址下载最新版本(http://hi.baidu.com/calfpc/blog/item/be1e6137136993390b55a9c0.html)需要...
  • 网页即时聊天工具的设计与实现--毕业设计
  • C++ 即时聊天工具

    2013-07-22 22:59:08
    一个基于网络的简易聊天工具的C++实现代码。
  • JAVA即时聊天工具

    热门讨论 2009-05-11 16:54:16
    一个简单的JAVA即时聊天工具 可以加好友, 支持图片,表情 。
  • 完全开源的代码,完全测试可用,附带服务器端的配置信息,后台管理,搭建属于自己的即时聊天工具
  • web即时聊天工具

    2013-06-14 15:47:17
    vs2008(C#)+sql 2005 网页版即时聊天程序 里面包含数据附加一下就能运行 此程序只是实现了最简单的聊天功能,有源码你们可以直接使用,也可改进后使用!
  • Android 开发即时聊天工具 YQ (更新)

    千次下载 热门讨论 2012-10-15 15:51:28
    Android 开发即时聊天工具 YQ ,仿QQ,实现网络即时聊天。
  • vc++设计实现的一个即时聊天工具 有服务器端和客户端,测试通过可以使用
  • 是一款局域网内即时通信软件,基于 TCP/IP(UDP)。可运行于多种操作平台(Win/Mac/UNIX/Java),并实现跨平台信息交流。不需要服务器支持, 支持文件/文件夹的传送 (2.00版以上),通讯数据采用 RSA/Blofish 加密 (2.00...
  • ajax模仿即时聊天工具

    2012-08-30 18:29:44
    这个小程序很好的描述了,即时聊天工具的工作原理。希望对你有帮助。
  • android 即时聊天工具

    2013-10-18 10:32:33
    android即时聊天工具-socket初步讲解文档
  • Android 开发即时聊天工具 YQ 1.3

    千次下载 热门讨论 2012-11-04 17:40:01
    Android 开发即时聊天工具 YQ (带数据库,以及数据库脚本) Android 开发即时聊天工具 YQ ,仿QQ,实现网络即时聊天。 100%可以运行!
  • 毕业设计做的基于C#的即时聊天工具,类似于QQ,能在局域网内使用,只有代码。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,535
精华内容 9,814
关键字:

即时聊天工具