html5websocket+node.js在线聊天

最新推荐文章于 2023-12-28 18:24:02 发布
最新推荐文章于 2023-12-28 18:24:02 发布
阅读量664 收藏 4
点赞数
分类专栏： 北斗困虎棋 文章标签： html5在线聊天 websocket websocket游戏 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tx101q/article/details/54808798
版权

这是游戏中的一个通信模块，单独拿出来就是一个在线聊天

源码如下

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK">
    <meta http-equiv="Cache-Control" content="must-revalidate,no-cache">
    <meta name="viewport"  content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0; user-scalable=no;">
    <title>北斗困虎棋</title>
    <meta name="keywords" content="北斗困虎棋,老虎吃羊">
    <meta name="description"  content="北斗困虎棋,老虎吃羊">

    <base href="." target="_blank">

    <link href="./res/css.css" rel="stylesheet" media="screen" type="text/css">
    <link href="./res/mobile.css" type="text/css" charset="utf-8">
    <script  src="./res/wsio.js"></script>




    <script type="text/javascript">

        var name="";
        var rec="all";
       var gamestate="";


        var blkg=false;

        function getMs(){
            var wb=document.getElementById("wenb").value;
            return wb;

        }


        function getTime(){

            return new Date().toLocaleString()+' 星期'+('日一二三四五六'.charAt(new Date().getDay()));
        }
        setInterval(function(){document.getElementById("time").innerHTML='时间:'+getTime()},1000);

        ///

        function okcn(){
            var ours=document.getElementById("our");
            ours.innerText='我['+name+']';

        }
        ///connect//
        function init(nameq) {
            window.socket = io.connect("ws://localhost:18080/");


            window.socket.emit("login", {name: nameq,gamestate:gamestate});

            window.socket.on('login', function (obj) {
                updateinfo(obj);
                okcn();
            });

            window.socket.on('logout', function (obj) {

                updateinfo(obj);
            });

            window.socket.on('msg', function (obj) {


                if (obj != null) {
                    console.log(obj.msg);
                    if (obj.to == "all" || obj.to == name) {

                        var str = obj.msg;
                        document.getElementById("xxtx").style.display = "block";
                        document.getElementById("content").innerHTML += ("<div style='margin-left: 20px;text-align: right'>" + "<p style='color:red'>" + obj.from + "向我发送</p>" + str + "</div>");
                        document.getElementById("content").scrollTop = document.getElementById("content").scrollHeight;
                        document.getElementById("musicxx").play();
                        var xxid = setTimeout(function () {
                            document.getElementById("xxtx").style.display = "none";
                            clearTimeout(xxid);
                        }, 3000);
                    }

                }
            });

        }
        function updateinfo(obj){
            var zxrs=document.getElementById("zxrs");
            var lb=document.getElementById("fat");
            lb.innerHTML='<div οnclick="dj(this)" class="shuli">广播</div>';

            var list=obj.onlineUsers;
            var Count=obj.onlineCount;
            zxrs.innerHTML="在线人数"+Count+"人";
            for(var k in list){
                var strlb='<div οnclick="dj(this)" class="shuli">'+list[k]+'</div>';
                lb.innerHTML+=strlb;
            }
        }




        function fss() {
            var colorz=document.getElementById("color").value;
            var sizez=document.getElementById("size").value+"px";
            var str='<p style="color:'+colorz+';font-size:'+sizez+'">'+ getMs()+'</p>';
            if(getMs().length>0) {
                document.getElementById("content").innerHTML +=("<div style='margin-left: 20px;text-align: left'>"+"<p style='color:chartreuse'>我向"+rec+"发送</p>"+str+"</div>");
                document.getElementById("content").scrollTop = document.getElementById("content").scrollHeight;
                window.socket.emit("ms", {msg: str, to: rec,from:name});
                document.getElementById("wenb").value="";

            }
        }




        /


        function dj(e){

            var allc=document.getElementById("fat").children;

            for(var i=0;i<allc.length;i++){
                allc[i].style.backgroundColor="#ff3291";

            }

            e.style.background="orange";
            document.getElementById("fd").innerHTML= e.innerText;
            if(e.innerText=="广播"){

                rec="all";
            }else {
                rec = e.innerText;
            }

            document.getElementById("fat").style.display = "none";
            blkg=false;
        }





        function changc(e){

            document.getElementById("wenb").style.color= e.value;

        }
        function changc1(e){

            document.getElementById("wenb").style.fontSize= e.value+"px";

        }


        window.οnkeydοwn=function(e){
            if(e.keyCode==13){
                fss();


            }



        }


        function zhankai(){
            if(!blkg){

                document.getElementById("fat").style.display="block";
                blkg=true;
            }else {

                document.getElementById("fat").style.display = "none";
                blkg=false;
            }
        }

        function  loginin(){

            document.getElementById("main1").style.display = "block";
            document.getElementById("main2").style.display = "block";
            document.getElementById("main3").style.display = "block";
            document.getElementById("mainlogin").style.display = "none";
            var nameq = document.getElementById("username").value;
            name = nameq;
            init(nameq);

        }

    </script>


    <style type="text/css">
        .shuli{ margin:10px ;
            color:gold;
            padding: 3px;
            background: #ff3291;
            cursor: pointer;


        }
        .shuli:hover{

            background: orangered;

        }


        ul { list-style: none; }
        #recordingslist audio { display: block; margin-bottom: 10px; }


        ::-webkit-scrollbar
        {
            width: 5px;
            height: 5px;
            background-color: rgba(213, 12, 54, 0.42);
        }

        /*定义滚动条轨道 内阴影+圆角*/
        ::-webkit-scrollbar-track
        {
            -webkit-box-shadow: inset 0 0 6px rgba(232, 10, 50, 0.3);
            border-radius: 10px;
            background-color: pink;
        }

        /*定义滑块 内阴影+圆角*/
        ::-webkit-scrollbar-thumb
        {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(217, 63, 113, 0.3);
            background-color: rgba(232, 6, 113, 0.42);
        }

    </style>

</head>
<body style="margin:0 auto;text-align: center;background-image: url(./res/yang.jpg);background-size: cover;background-repeat: no-repeat">

<div id="topCall" class="dh_001">
    <div class="dh_002">
        <div class="dh_003">
            <h1 style="color: orange;font-size: 1.5em">北斗困虎棋</h1>



        </div>
    </div>
</div>

















<!----------------------------------------------------------------------------------------------------------------------------->


<div class="wz yahei" style="background: transparent;border:0">


    <div style="height: 50px;background:transparent">

    </div>

    <div id="mainlogin" style="margin: 0 auto;height: 800px;width: 350px;background: rgba(204, 33, 94, 0.41);text-align: center;z-index: 10">
        <br/><br/><br/><br/> <br/><br/>

        <input type="text" id="username" placeholder="用户名" style="color: orangered;margin: 0 auto"><br/><br/>
        <input type="password" id="pwds" placeholder="密码" style="color: orangered;margin: 0 auto"><br/><br/>
        <button id="mianbt"  style=";margin: 0 auto" οnclick="loginin();">登录</button>
    </div>






    <audio id="musicxx"  controls="controls" style="display: none"   src="./res/xiaoxi.wav" type="audio/mpeg"></audio>
    <div id="main2" style="height: 50px;display: none">

    </div>
    <div  id="main1" style="margin: 0 auto;background:transparent;height: 900px;;display: none">
        <div style="background: rgba(110, 0, 36, 0.42);;margin: 0 auto">
            <p style="color: rgba(204, 33, 94, 0.41)">----------------------------------------------------------</p>

            <span id="our" style="color:yellow"></span><span style="color:snow">向好友</span> <span id="fd" style="color: orangered" ></span> <span style="color:snow">发消息</span>
            <p id="xxtx" style="display: none">  <input type="image" src="./res/mess.gif" style="height: 30px;width: 30px;"></p>
            <p> <span id="zxrs" style="color: chartreuse"></span><br/>
                <span id="time" style="color: red;"></span></p>

            <p style="color: rgba(204, 33, 94, 0.41)">----------------------------------------------------------</p>
        </div>

        <div id="main3" style="position:absolute;left:32%;top:10%;display: none;background: rgba(204, 33, 94, 0.41)">
            <p style="color: gold;font-size: 2em;cursor: pointer" οnclick="zhankai();">好友列表<span style="">[ +/- ]</span> </p>
            <div id="fat" style="display: none;height: 200px;overflow-y: scroll;font-size: 1.9em">
                <div οnclick="dj(this)" class="shuli">广播</div>

            </div>

        </div>
        <div id="content" style="margin:0 auto;background:rgba(110, 0, 36, 0.42);height: 200px;overflow-y: scroll;overflow-x: hidden">

        </div>



        <div style="margin: 0 auto;background:transparent;width: 100%">

            <div style="background:rgba(110, 0, 36, 0.42);height: 90px;margin: 0 auto">
                <textarea id="wenb" style="background: transparent;color:#1437aa;height: 80px;overflow-x: scroll;resize:none;font-size: 30px" placeholder="输入聊天"></textarea>
            </div>

            <p> <input id="size" type="range" min="5" max="100" value="40" οnchange="changc1(this)"/>
                <input id="color" style="background: transparent;color: green" type="color" value="#1437AA" οnchange="changc(this);" >   
                <input style="background: transparent;color: snow;font-size: 2.5em" type="button" value="发送" οnclick="fss();">

            </p>




        </div>

        <canvas id="canvas"  style="background: orange;height: 400px"></canvas>






    </div>




</div>




<!----------------------------------------------------------------------------------------------------------------------------------------------------->
























<style type="text/css">
    a{
        cursor: pointer;

    }
    .date_selector, .date_selector * {
        width: auto;
        height: auto;
        border: none;
        background: none;
        margin: 0;
        padding: 0;
        text-align: left;
        text-decoration: none;
    }

    .date_selector {
        background: #F2F2F2;
        border: 1px solid #bbb;
        padding: 5px;
        margin: -1px 0 0 0;
        position: absolute;
        z-index: 100000;
        display: none;
    }

    .date_selector_ieframe {
        position: absolute;
        z-index: 99999;
        display: none;
    }

    .date_selector .bd_nav {
        width: 17.5em; /* 7 * 2.5em */
    }

    .date_selector .month_nav, .date_selector .year_nav {
        margin: 0 0 3px 0;
        padding: 0;
        display: block;
        position: relative;
        text-align: center;
    }

    .date_selector .month_nav {
        float: left;
        width: 55%;
    }

    .date_selector .year_nav {
        float: right;
        width: 35%;
        margin-right: -8px; /* Compensates for cell borders */
    }

    .date_selector .month_name, .date_selector .year_name {
        font-weight: bold;
        line-height: 20px;
    }

    .date_selector .button {
        display: block;
        position: absolute;
        top: 0;
        width: 18px;
        height: 18px;
        line-height: 17px;
        font-weight: bold;
        color: #003C78;
        text-align: center;
        font-size: 120%;
        overflow: hidden;
        border: 1px solid #F2F2F2;
    }

    .date_selector .button:hover, .date_selector .button.hover {
        background: none;
        color: #003C78;
        cursor: pointer;
        border-color: #ccc;
    }

    .date_selector .prev {
        left: 0;
    }

    .date_selector .next {
        right: 0;
    }

    .date_selector table {
        border-spacing: 0;
        border-collapse: collapse;
        clear: both;
        width: 17.5em;
    }

    .date_selector th, .date_selector td {
        width: 2.5em;
        height: 2em;
        padding: 0;
        text-align: center;
        color: black;
    }

    .date_selector td {
        border: 1px solid #ccc;
        line-height: 2em;
        text-align: center;
        white-space: nowrap;
        color: #003C78;
        background: white;
    }

    .date_selector td.today {
        background: #FFFEB3;
    }

    .date_selector td.unselected_month {
        color: #ccc;
    }

    .date_selector td.selectable_day {
        cursor: pointer;
    }

    .date_selector td.selected {
        background: #D8DFE5;
        font-weight: bold;
    }

    .date_selector td.selectable_day:hover, .date_selector td.selectable_day.hover {
        background: #003C78;
        color: white;
    }
</style>








</body>
</html>

101tx
关注
专栏目录
js实现网页在线聊天室
06-06
Javascript实现网页在线聊天,类似于聊天室的简单实现.
js实现网页在线聊天功能（一）
热门推荐
Golden_lion的博客
04-05 4万+
由于一些项目的需要，近来我自己写了一个基于JS，要使用ajax接收发送数据的一个网页在线聊天工具。                                     图一 准备将代码贴到网上，欢迎大家指教。 功能说明： 1、本工具交互网速需要20KB左右。我目前的测试，10个用户同时聊天对服务器的压力不大！ 2、文件夹有：在Chat文件夹下有：icon文
js实现网页在线聊天功能（三）
Golden_lion的博客
04-05 5492
//转为可编辑状态 function Edit(){   //Editr_wjl_001_E.document.designMode = "On";   var iframeDoc =getIframeDoc(document.getElementById("Editr_wjl_001_E"));      iframeDoc.designMode = "On";   document.
JS实现简易多人在线聊天室
sesnonhp的博客
06-19 3338
一、设计要求： 1）用户应通过用户名，密码登录聊天室 2）聊天室可以显示所有在线用户 3）在每一条聊天内容之前，显示发出这条聊天内容的用户名。 4）聊天室可以用web，客户端，或者纯文本方式实现。 5）当用户进入和离开聊天室时，系统会在聊天室里广播。 二、功能实现 1、登录功能： 提前设置一个含有用户名和密码的对象作为数据库，点击登录时通过事件绑定获取两个输入框的内容，遍历数据库每个数据将用户名和密码同时匹配的重定向到首页，同时将用户名通过通过URL参数传递给首页。如果遍历完不匹配，则弹出警示框：“昵称或密
websocket+node.js实现实时聊天系统问题咨询
01-20
在本问题中，开发者尝试使用WebSocket和Node.js构建一个实时聊天系统，其中包括两个关键部分：服务器端(server.js)和客户端(client.html)。 在服务器端(server.js)，使用了`nodejs-websocket`库来处理WebSocket连接...
WebSocket+node.js创建即时通信的Web聊天服务器
10-21
根据提供的文件信息，以下知识点详细介绍了使用WebSocket和node.js创建即时通信Web聊天服务器的过程。 ### WebSocket协议基础 WebSocket是一个全双工通信协议，它允许服务器和客户端之间进行持久连接并进行实时...
WebSocket(socket.io + node.js)聊天室
WILLCSDNKK的博客
04-22 390
记录项目： 制作一个基于socket.io和node.js的聊天室 socket.io的api用法详细看https://socket.io/ 前端效果显示： 1.登录界面 2.群聊页面 3.私聊页面 前端页面分三个盒子1.登录盒子2.群聊盒子3.私聊盒子 逻辑：登录username作为唯一标识，在登录时用户名设置为不允许重复；登录成功登录盒子display:none,群聊盒子display:block;左侧用户栏点击私聊人头像将私聊盒子打开，群聊盒子隐藏；再次点击就回到群聊.
webSocket+Node+Js实现在线聊天（包含所有代码）
最新发布
05-24
至此，你已经了解了如何使用WebSocket、Node.js和JavaScript创建一个简单的在线聊天应用。实际项目中，可能还需要处理更多细节，比如错误处理、用户认证、消息广播、消息持久化等。提供的压缩包文件应该包含了所有...
基于node.js,socket.io,原生js实现的在线实时聊天程序
w497619的博客
12-28 1286
node.js实现的赛博坦星球在线聊天系统
Node.js在线聊天室实战
Pan的博客
07-21 2442
Node.js在线聊天室实战 项目完整代码 项目完整代码可以通过wget下载： # 下载代码 wget https://labfile.oss.aliyuncs.com/courses/455/louChat.zip # 解压缩代码 unzip louChat.zip 同样的我们需要把 app.js 中第 59 行的代码中的端口号 3000 改为 8080。然后通过以下命令即可运行项目： $ cd louChat $ npm install $ node app.js 运行效果为： 多次运行，也就是
使用websocket+html+nodejs快速搭建一个建议的在线聊天功能
Wanliu_233的博客
05-09 679
1、先新建一个html网页用于展示效果 <!DOCTYPE html> <html> <head> <style> /* #box{ width: 300px; height: 300px; border: 1px rgb(158, 158, 158) solid; } */ </style> </head> <body> <!--
利用简单的js实现个人聊天功能
ck2018182068的博客
07-27 428
代码】利用简单的js实现个人聊天功能。
js和java交互websocket实现实时聊天
Azbtt的博客
10-15 1701
js和java交互websocket实现实时聊天
“编程式 WebSocket” 实现简易 online QQ在线聊天项目
CYK_byte的博客
04-17 1665
实现一个 online QQ在线聊天项目，当用户登录上自己的账号后，将会显示在线，并可以向自己的好友进行在线聊天，退出登录后，将会把当前用户下线的消息推送给该用户的所有好友，并标识“下线”。
JS实现聊天界面
qq_58878034的博客
09-22 863
【代码】JS实现聊天界面。
html5在线聊天模板,h5聊天室模板|仿微信聊天室html5
weixin_34208400的博客
05-31 2748
运用html5开发的仿微信聊天室实战项目weChatRoom，基于h5+css3+zepto+weui+wcPop+swiper等技术混合开发，整体采用flex布局模式，兼容适配各种手机屏幕，实现了消息、表情发送，动图gif，图片、视频预览，红包/打赏等功能。// ...滚动聊天区底部function wchat_ToBottom(){//$(".wc__chatMsg-panel").anima...
HTML5 新特性 - WebSocket实现聊天（群聊天室、一对一聊天）
欢迎来到猫猫的博客 o_o ，如有问题，欢迎提出改正~
12-09 4066
群聊天室 需求如下 在聊天界面中建立websocket连接. 一个客户端发消息, 服务端接收消息后把消息分发给所有客户端. 客户端接收服务端发回来的消息, 打印.(显示在聊天记录区域) 提示当前在线人数. 服务端中一旦接收到客户端连接, 维护一个全局变量count, 记录当前在线人数(count++) // 声明一个全局变量count, 用于保存当前在线人数 let count = 0 socketio.on('connection', (socket
html5在线聊天一对一,纯js网页在线聊天对话插件(原创)
weixin_36031047的博客
05-31 2273
插件描述：包含最近会话、好友分组、系统通知导航界面，支持发送接收消息功能，后续长期持续更新。更新时间：2020-04-0621:59:051、首部引入2、使用方式仅一行代码varcm=newChatModule({mock_mode:true});//mock_mode传false时不会加载mockjs，会真正发起对应url请求3、因模拟后端数据，演示用例额外引入axios和mockjs...
php对话框制作,js制作一个简单的对话框教程
weixin_39624705的博客
04-13 400
这篇文章主要为大家详细介绍了js实现简易聊天对话框，具有一定的参考价值，感兴趣的小伙伴们可以参考一下本文实例为大家分享了js实现简易聊天对话框的具体代码，供大家参考，具体内容如下聊天对话框*{font-size: 14px; padding:0; margin:0;}.main{position: relative;margin: 20px auto;border: 1px solid steel...
使用node+websocket+html构建腾讯课堂聊天室
"本文将介绍如何使用Node.js、WebSocket和HTML技术实现腾讯课堂聊天室的聊天功能，包括前端和后端的关键实现细节以及需要注意的功能点。" 在开发在线教育平台时，实时通信功能是非常关键的一环，特别是对于腾讯课堂...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值