简版网页聊天室

最新推荐文章于 2022-04-07 11:00:13 发布
最新推荐文章于 2022-04-07 11:00:13 发布
阅读量314 收藏
点赞数
文章标签： node.js jquery bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36639162/article/details/106598274
版权

简版网页聊天室 

开发工具为vscode 文档目录结构如下

index页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./scripts/jquery-3.5.1.js"></script>
    <script src="./scripts/bootstrap.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script src="./scripts/script.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <style>
        html,
        body {
            margin: 0px;
            padding: 0px;
            height: 100%;
            background-color: gainsboro;
            overflow: hidden;
        }

        #loginbox {
            width: 100%;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

        h1 {
            text-align: center;
        }

        .login {
            width: 500px;
            margin: 0 auto;
        }

        #chatbox {
            height: 100%;
        }

        #top {
            /* position: fixed;
            top: 0;
            left: 0; */
            height: 60px;
            width: 100%;
            /* background-color: hotpink; */
        }

        #content {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            /* padding: 60px 0 40px; */
            padding-bottom: 40px;
            overflow-y: auto;
            /* background-color: aqua; */
        }

        #footer {
            position: fixed;
            bottom: 0;
            left: 0;
            height: 40px;
            width: 100%;
            box-sizing: border-box;
            background-color: gainsboro;
            /* background-color: yellow; */
            padding: 2px 0;
        }

        .alert {
            z-index: 100;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
        }

        #chatinput {
            margin-left: 10px;
            font-size: 25px;
        }
    </style>
</head>

<body>
    <div id="loginbox">
        <h1>登录</h1>
        <hr>
        <div class="login">
            <div class="form-horizontal">
                <div class="form-group">
                    <label for="name" class="col-sm-3 control-label">用户名</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="name" placeholder="请输入用户名">
                    </div>
                    <label for="name" class="col-sm-3 control-label" id="errmsg"></label>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-9">
                        <button type="button" class="btn btn-info btn-default" id="loginbutton">登录</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div style="display: none;" id="chatbox">
        <!-- 显示欢迎信息 -->
        <div class="alert alert-info alert-dismissible fade in" role="alert" id="myalert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                    aria-hidden="true">&times;</span></button>
        </div>
        <!-- 显示好友上线提醒 -->
        <div class="alert alert-info alert-dismissible fade in" role="alert" id="myalert1">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                    aria-hidden="true">&times;</span></button>
            <span></span>
        </div>

        <div id="top"></div>
        <div id="content"></div>
        <div id="footer">
            <div class="row">
                <div class="col-md-11">
                    <input type="text" placeholder="saying somgthing" class="form-control" id="chatinput">
                </div>
                <form action="" style="display: none;" id="resetform">
                    <input type="file" style="display: none" id="imginput">
                </form>
                <div class="col-md-1">
                    <button type="button" class="btn btn-primary" id="imgbutton">发送图片</button>
                </div>
            </div>
        </div>
    </div>

</body>

</html>

app.js

var express = require("express")
var app = express();
var server = require("http").Server(app);
var path = require("path")
var io = require("socket.io")(server)

//保存在线用户的数量
var usersNum = 0
//保存当前所有在线用户
var users = []

server.listen(3000, function () {
    console.log("server running at localhost:3000")
})

io.on("connection", function (socket) {
    usersNum++
    console.log(`当前有${usersNum}个用户连接上服务器了`)

    socket.on("login", function (data) {
        // console.log(data)

        //用户名重复检查
        socket.username = data.username
        for (var user of users) {
            if (user.username == data.username) {
                socket.emit("usernameErr", { err: "用户名已存在" })
                socket.username = null
                break;
            }
        }

        if (socket.username) {
            users.push({
                username: data.username,
                messages: [],
                dataUrl:[]
            })

            //触发loginSuccess事件
            io.emit("loginSuccess", data)
        }
    })

    //监听sendMessage事件，获取客户端发送文本消息
    socket.on("sendMessage", function (data) {
        //console.log(data)
        for (var i = 0; i < users.length; i++) {
            if (users[i].username == data.username) {
                users[i].messages.push(data.msg)
                //存储文本消息后，将文本消息广播给其他终端
                io.emit("receiveMessage", data)
                break;
            }
        }
    })
    //监听客户端发出的sendImg事件，获取图片数据
    socket.on("sendImg", function (data) {
        //console.log("sendImg",data)
        for (var i = 0; i < users.length; i++) {
            if (users[i].username == data.username) {
                users[i].dataUrl.push(data.dataUrl)
                
                //存储图片后，将图片信息广播给其他终端
                io.emit("receiveImg", data)
                break;
            }
        }
    })

    socket.on("disconnect", function () {
        usersNum--;
        console.log(`当前有${usersNum}个用户连接上服务器了`)

        //删除用户
        users.forEach(function (user, index) {
            if (user.username == socket.username) {
                users.splice(index, 1)
            }
        })

    })
})





app.use("/", express.static(path.join(__dirname, "./public")))

script .js

var express = require("express")
var app = express();
var server = require("http").Server(app);
var path = require("path")
var io = require("socket.io")(server)

//保存在线用户的数量
var usersNum = 0
//保存当前所有在线用户
var users = []

server.listen(3000, function () {
    console.log("server running at localhost:3000")
})

io.on("connection", function (socket) {
    usersNum++
    console.log(`当前有${usersNum}个用户连接上服务器了`)

    socket.on("login", function (data) {
        // console.log(data)

        //用户名重复检查
        socket.username = data.username
        for (var user of users) {
            if (user.username == data.username) {
                socket.emit("usernameErr", { err: "用户名已存在" })
                socket.username = null
                break;
            }
        }

        if (socket.username) {
            users.push({
                username: data.username,
                messages: [],
                dataUrl:[]
            })

            //触发loginSuccess事件
            io.emit("loginSuccess", data)
        }
    })

    //监听sendMessage事件，获取客户端发送文本消息
    socket.on("sendMessage", function (data) {
        //console.log(data)
        for (var i = 0; i < users.length; i++) {
            if (users[i].username == data.username) {
                users[i].messages.push(data.msg)
                //存储文本消息后，将文本消息广播给其他终端
                io.emit("receiveMessage", data)
                break;
            }
        }
    })
    //监听客户端发出的sendImg事件，获取图片数据
    socket.on("sendImg", function (data) {
        //console.log("sendImg",data)
        for (var i = 0; i < users.length; i++) {
            if (users[i].username == data.username) {
                users[i].dataUrl.push(data.dataUrl)
                
                //存储图片后，将图片信息广播给其他终端
                io.emit("receiveImg", data)
                break;
            }
        }
    })

    socket.on("disconnect", function () {
        usersNum--;
        console.log(`当前有${usersNum}个用户连接上服务器了`)

        //删除用户
        users.forEach(function (user, index) {
            if (user.username == socket.username) {
                users.splice(index, 1)
            }
        })

    })
})





app.use("/", express.static(path.join(__dirname, "./public")))
秋叶哈哈
关注
简易网页聊天室DEMO
冷江
03-16 2612
主要实现了群聊功能 原理很简单： 本地（javascript）向服务器发送消息（图片或者文字），由服务器（php）向各个主机转发 上传图片由ajax和html5实现，可以参考我之前的博客Html5&Ajax实现文件后台上传 暂时还未区分用户姓名、ip、时间等信息（不过这都是很简单的） index.html DEMO //定义一些变量 var chat_board;
项目：网页聊天室
N_Peng的博客
08-28 1276
注册界面： 登录界面： 上线通知功能： 用户群聊功能：
网页版聊天室
12-09
一个简单的网页版聊天工具，使用了ajax、php、session会话等技术。没有实用价值，但适合初学者拿来学习。
網頁聊天室
林信良（良葛格）的专栏
05-14 7455
  網頁聊天的基本原理很簡單，在使用者發送訊息給伺服端時，同時取回新的聊天訊息，在使用者沒有發送訊息，同時查詢伺服端是否有新的訊息，並顯示在頁面中。 不過重點就在於取得訊息或重新取得訊息的方式，在過去，是在讓瀏覽器定時重新整理網頁，每一次除了新的訊息之外，往往伴隨著大量重複的HTML標籤等內容。
基于WebSocket实现网页版聊天室
anghanlan0015的博客
04-30 484
　　WebSocket ，HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议，其使用简单，应用场景也广泛，不同开发语言都用种类繁多的实现，仅Java体系中，Tomcat,Jetty，Spring等都提供了对WS的API支持。本篇不做理论探究，仅自娱自乐，简单实现网页版的聊天室功能，在实际开发场景中变通使用即可。废话不叽歪，直接撸出来—— 1 简单页面 <...
简单实现网页在线聊天
06-21
基于application 实现 的网页在线聊天的功能 基于application 实现 的网页在线聊天的功能 基于application 实现 的网页在线聊天的功能
基于PHP的在线聊天室(网页版)
专注PHP源码
07-07 2776
前言 此项目免费分享(群文件中获取) 交流群：758350964(已满) 交流群2：511496356 一 项目介绍 基于PHP的在线聊天室(网页版) 技术栈 php+mysql+bootstrap 可搭建在phpstudy下快速部署 二 主要功能 1 注册/登录 2 聊天功能 3 撤回功能 4 查看群成员 三 系统截图 四 源码目录及部署 1 数据库文件 sql/chatroom.sql 2 数据库配置文件 Tools/phpTools.php ...
java web版简单版聊天室
08-29
【Java Web版简单版聊天室】是一个基于Java技术构建的Web应用程序，专为实现多人在线实时交流而设计。这个项目的核心功能是提供一个平台，让用户能够进行文本聊天，且支持群发消息。它包含了必要的服务器端逻辑和...
在线聊天室（网页版，node.js和socket.io实现）
04-05
在这个项目中，我们将探讨如何使用Node.js和Socket.IO来构建一个网页版的在线聊天室。Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它让开发者可以使用JavaScript进行服务器端编程。Socket.IO则是一个库，...
网页版聊天服务器,网页版在线聊天室
weixin_39859819的博客
08-13 4398
引言实现网页版的在线聊天室的方法有很多，在没有来到HTML5之前，常见的有：定时轮询、长连接+长轮询、基于第三方插件(如FLASH的Socket)，而如果是HTML5，则比较简单，可以直接使用WebSocket，当然HTML5目前在PC端并没有被所有浏览器支持，所以我的这个聊天室仍是基于长连接+长轮询+原生的JS及AJAX实现的多人在线即时交流聊天室，这个聊天室其实是我上周周末完成的，功能简单，可...
WebChat网页聊天室
11-05
（JDK1.8、Tomcat8、Mysql5.5、SSM）（使用MybatisPlus增强插件、Pagehelper分页、前端使用AmazeUI与部分LayUI）（聊天使用WebSocket进行通信）(使用Shiro做权限控制与安全认证)（包含建表语句）
基于J2EE的网页版在线聊天室
10-14
基于J2EE的网页版在线聊天室，实现注册，登入，多人在线聊天，私聊，后天管理等功能。
websocket 多人聊天室 网页版
07-18
javaweb 实现的多人聊天系统，代码中相应的url改成你自己的就可以了，直接导入myeclipse就可以运行
web网页版的聊天室 JsP+ ajax 实现公聊和私聊
01-06
此项目有各种聊天效果，实现表情 和字体颜色的选择， 还有私聊，群聊，离开聊天室都有提示， 另外有显示在线总人数和账号的公告栏！ 下载解压导入就能运行，无需加载其他jar包， 绝对是个值得学习的好项目， 开源从分享开始，希望大家多分享自己的代码。。。。
网页版多人聊天室系统
07-23
多人聊天室，功能基本已经实现，可供参考，兼容ie8，给别人做的毕业设计，实际企业应用时建议加密传输。 SockJS+Spring+SpringMVC+Mybaties+EasyUI+Mysql+Tomcat7+Jdk7 博客地址：https://blog.csdn.net/u014644574/article/details/97005036
python实现简单聊天室功能 可以私聊
09-19
【Python实现简单聊天室功能及私聊机制详解】 在Python编程中，构建一个简单的聊天室不仅可以作为学习网络编程的基础，也可以作为一个有趣的项目实践。本文将详细介绍如何使用Python实现一个聊天室，其中包含了私聊...
聊天室_简易聊天室_源码
10-04
9. **网页登陆localhost:3000**：用户在完成项目部署后，可以在浏览器中输入`http://localhost:3000`访问聊天室。`localhost`代表本地计算机，`3000`是`app.js`监听的端口。 为了运行这个简易聊天室，你需要先确保...
项目__网页版聊天室
qq_42978418的博客
08-01 1225
项目内容 使用开源websocket框架mongoose编写网页版本的群聊即时通信工具，使用http+mongoose+session+mysql+jsoncpp的技术构成，从而实现一个网页版的聊天室。 技术点：C++11 STL、http协议、websocket协议 、session和cookie理解、mysql等 项目的整个逻辑： 首先，设计基本框架 然后，先完成基本的聊天逻辑 在能够让我们访问数据库，访问我们之前所建立的表 最后，完成登录逻辑 这样就可以开始网页版聊天室的聊天了 WebSock
Web聊天室
qq_54773998的博客
04-07 6805
目录 一，简介 二，开发环境 三，涉及的技术 四，主要功能 1.注册功能 2.登录功能 3.异地登陆（第一次登录网页会被强制退出） 4.发送消息 5.接收消息 6.注销登录 五，准备工作 1.引入开发需要的依赖包 2.设计数据库以及表关系 3.设计实体类 4.设计工具类 数据库连接类 公共方法类 六.注册功能 1）从前端获取用户输入的数据 2）后端获取前端传输的数据 3）判断数据库中是否有相同的账号昵称 4）如果没有将注册数据插入并返回后端提示给前端 5）前端接
使用Node.js与Socket.IO构建跨浏览器聊天室教程
"本文将引导你使用Node.js和Socket.IO创建一个简单的跨浏览器网页聊天室。首先，你需要下载并安装Node.js，接着安装Socket.IO库，通过创建HTTP服务器和监听特定端口来运行聊天室应用。客户端部分则通过HTML和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值