开发者社区> 问答> 正文

nodejs写的一个聊天室,chrome一直在报错求解?报错

写了一个聊天室,但是chrome控制台一直在报错,


这是我的项目目录


html部分代码:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" />
        <script src="node_modules/socket.io/node_modules/socket.io-client/socket.io.js"></script>
        <script type="text/javascript" src="js/script.js" ></script>
    </head>

    <body onload="window_onload()" onunload="window_onunload()">
        <h1>Socket.IO聊天室</h1>
        <div id="divContainerl">
            <table id="tbDlg" border="0" cellpadding="3" cellspacing="0" width="100%">
                <tr id="trDlg">
                    <td id="tdDlg" width="5">
                        用户名: 
                        <input id="tbxUsername" type="text" value="游客" size="20" />
                        <input id="btnLogin" type="button" value="登录" onclick="btnLogin_onclick();" />
                        <input id="btnLogout" type="button" value="退出" disabled onclick="btnLogout_onclick();" />
                    </td>
                </tr>
            </table>
        </div>
        <div id="divLeft">
            <div id="divchat"></div>
            <div id="divContainer3">
                <table id="tbDlg" border="0" cellpadding="3" cellspacing="0" width="100%">
                    <tr id="trDlg">
                        <td valign="top" id="tdDlg" nowrap>对话</td>
                        <td valign="top" id="tdDlg">
                            <textarea id="tbMsg" cols="255" rows="5" style="width: 100%;"></textarea>
                        </td>
                        <td valign="top" id="tdDlg">
                            <input id="btnSend" type="button" value="发送" disabled onclick="btnSend_onclick();" />
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div id="divRight">
            用户列表:
        </div>
    </body>
</html>



服务端代码:

var http = require('http');
var express = require('express');
var sio = require('socket.io');

var app = express();
var server = http.createServer(app);
app.get('/',function(req,res){
    res.sendFile( '/index.html' , { root:__dirname })
});
server.listen(8020);
var io = sio.listen(server);
var name = [];
io.sockets.on('connection',function(socket){
    socket.on('login',function(name){
        for(var i=0;i<names.length;i++){
            if(names[i] == name){
                socket.emit('duplicate');
                return;
            }
        }
        names.push(name);
        io.sockets.emit('login',name);
        io.sockets.emit('sendClients',names);
    });
    socket.on('chat',function(data){
        io.sockets.emit('chat',data);
    });
    socket.on('logout',function(name){
        for(var i=0;i<names.length;i++){
            if(names[i] == name){
                names.splice(i,1);
                break;
            }
        }
        socket.broadcast.emit('logout',name);
        io.sockets.emit('sendClients',names);
    });
});



js脚本的代码

var userName,socket,tbxUsername,tbxMsg,divChat;
function window_onload(){
    divChat = document.getElementById('tbxUsername');
    tbxUsername = document.getElementById('tbxUsername');
    tbxMsg = document.getElementById('tbMsg');
    tbxUsername.focus();
    tbxUsername.select();
}
function AddMsg(msg){
    divChat.innerHTML += msg + '<br>';
    if(divChat.scrollHeight > divChat.clientHeight){
        divChat.scrollTop = divChat.scrollHeight - divChat.clientHeight;
    }
}
function btnLogin_onclick(){
    if(tbxUsername.value.trim() == ''){
        alert('请输入用户名');
        return;
    }
    userName = tbxUsername.value.trim();
    socket = io.connect();
    socket.on('connect',function(){
        AddMsg("与聊天服务器的连接已建立。");
        socket.on('login',function(name){
            AddMsg('欢迎用户' + name + '进入聊天室');
        });
        socket.on('sendClients',function(names){
            var divRight = document.getElementById('divRight');
            var str = '';
            names.forEach(function(name){
                str += name + "<br>";
            })
            divRight.innerHTML = "用户列表<br/>";
            divRight.innerHTML += str;
        });
        socket.on('chat',function(data){
            AddMsg(data.user + '说:' + data.msg);
        });
        socket.on('disconnect',function(){
            AddMsg('与聊天服务器连接已经断开。');
            document.getElementById('btnSend').disabled = true;
            document.getElementById('btnLogout').disabled = true;
            document.getElementById('btnLogin').disabled = '';
            var divRight = document.getElementById('divRight');
            divRight.innerHTML = "用户列表";
        });
        socket.on('logout',function(name){
            AddMsg('用户' + name + '已经退出聊天室');
        });
        socket.on('duplicate',function(){
            alert('该同户名已经被使用');
            document.getElementById('btnSend').disabled = true;
            document.getElementById('btnLogout').disabled = true;
            document.getElementById('btnLogin').disabled = '';
        });
    });
    socket.on('error',function(err){
        AddMsg('与聊天室服务器连接发生错误');
        socket.disconnect();
        socket.removeAllListeners('connect');
        io.sockets = {};
    });
    socket.emit('login',userName);
    document.getElementById('btnSend').disabled = '';
    document.getElementById('btnLogout').disabled = '';
    document.getElementById('btnLogin').disabled = true;
}
function btnSend_onclick(){
    var msg = tbxMsg.value;
    if(msg.length > 0){
        socket.emit('chat',{user:userName,msg:msg});
        tbxMsg.value = '';
    }
}
function btnLogout_onclick(){
    socket.emit('logout',userName);
    socket.disconnect();
    socket.removeAllListeners('connect');
    io.sockets = {};
    AddMsg('用户' + userName + '退出聊天室:');
    var divRight = document.getElementById('divRight');
    divRight.innerHTML = "用户列表";
    document.getElementById('btnSend').disabled = 'disabled';
    document.getElementById('btnLogout').disabled = 'disabled';
    document.getElementById('btnLogin').disabled = '';
}
function window_onunload(){
    socket.emit('logout',userName);
    socket.disconnect();
}



求大神帮忙看看

展开
收起
爱吃鱼的程序员 2020-06-12 14:25:28 536 0
1 条回答
写回答
取消 提交回答
  • https://developer.aliyun.com/profile/5yerqm5bn5yqg?spm=a2c6h.12873639.0.0.6eae304abcjaIB

    楼主能开源让我们运行看下嘛,光看代码其实很难看得出问题的。

    2020-06-12 14:25:46
    赞同 展开评论 打赏
问答分类:
问答标签:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
探究 Node.js 的服务端之路 立即下载
个推微服务实践 基于OpenResty 和Node.js 立即下载
沪江基于Node.js大规模应用实践 立即下载