首先是下载包:
npm install express
npm install socket.io
建立文件:
开发的聊天室源码-express socket聊天室">
服务器端代码:server.js
代码如下 | 复制代码 |
var http=require("http"); var express=require("express"); var sio=require("socket.io"); var app=express(); var server=http.createServer(app); |
静态页面 chart.html:
代码如下 | 复制代码 |
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Socket.IO聊天室</title> <link rel="stylesheet" href="chart.css" /> <script src="/socket.io/socket.io.js"></script> <script type="text/javascript" src="chart.js"></script> </head> <body onload="window_onload()"> <h1>Socket.IO聊天室</h1> <div id="divContainer1"> <table class="tbDlg" border="0" cellpadding="3" cellspacing="0" width="100%"> <tr class="trDlg"> <td class="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 class="tbDlg" border="0" cellpadding="3" cellspacing="0" width="100%"> <tr class="trDlg"> <td valign="top" class="tdDlg" nowrap>对话</td> <td valign="top" class="tdDlg"> <textarea id="tbxMsg" cols="255" rows="5" style="width: 100%"></textarea> </td> <td valign="top" class="tdDlg"> <input id="btnSend" type="button" value="发送" disabled onclick="btnSend_onclick();" /> </td> </tr> </table> </div> </div> <div id="divRight">用户列表:</div> </body> </html> |
静态css文件:
代码如下 | 复制代码 |
h1{ font-family: Arial,Helvetica,sans-serif; font-weight: bold; font-size: 14pt; color: #006bb5; background-color: #f0f0f0; border-radius: 5px; border: 1px solid #f0f0f0; padding: 5px; margin: 0 0 18px 0; } div[id^=divContainer]{ border: 0; margin: 10px 0; padding: 3px; background-color:#f0f0f0; border-radius: 5px; } div#divLeft{ width: 85%; background-color:#f0f0f0; float: left; } div#divRight{ width: 15%; background-color:white; float: right; font-weight: bold; font-size: 12px; } div#divchat{ border: 0; margin: 10px 0; padding: 3px; background-color:#f0f0f0; border-radius: 5px; position: relative; height: 300px; overflow: auto; font-size: 12px; } table.tbDlg{ font-family:Verdana,Helvetica,sans-serif; font-weight: normal; font-size: 12px; background-color: #f0f0f0; } tr.trDlg,td.tdDlg { background-color: #f0f0f0; font-size: 10px; } textarea{ font-family: inherit; font-size: 10pt; border:1px solid #444; background-color:white; width: 100%; } input[type="button"]{ font-family: inherit; border: 1px solid #808080; border-radius: 10px; margin: 1px; color: white; background-color:#81a0b5; width: 100px; } input[type="button"]:hover{ margin: 1px; background-color: #006bb5; } input[type="button"]:active{ margin: 1px; font-weight: bold; background-color:#006bb5; } input[type="button"]:focus{ margin: 0; font-weight: bold; background-color:#006bb5; } |
静态js文件
代码如下 | 复制代码 |
var userName,//用户登录到socket.io聊天室中时所使用的用户名 socket,//与聊天服务器连接的socket端口对象 tbxUsername,//用户名文本框 tbxMsg,//对话文本框 divChat;//页面中显示消息区域 function window_onload(){ divChat=document.getElementById("divchat"); tbxUsername=document.getElementById("tbxUsername"); tbxMsg=document.getElementById("tbxMsg"); tbxUsername.focus(); tbxUsername.select(); } function AddMsg(msg){ socket.on("error", function (err) { function btnSend_onclick(){ |
最终界面
可以多开几个浏览器进行测试.这样效果更佳.