写了一个聊天室,但是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); }); });
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(); }
楼主能开源让我们运行看下嘛,光看代码其实很难看得出问题的。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。