最近新get了一招，先上图：
看到这是不是很熟悉呢，有没有一种想拿鼠标拖一拖的错觉呢。没错它就是模仿了qq群聊的样式，不过功能暂时不多只能发文字。这个在线聊天室使用了web-socket协议的功能并以node.js为后台进行编写，具体实现的机制是：
每个用户向进入界面后将与服务器连接，连接成功后用户向服务器发送的消息将被广播到所有正在连接该服务器的用户（即把该消息发送到连接到服务器的所有用户，因此实现了群聊的功能）
①用户将通过 var socket = io.connect("/") 发起与服务器的连接，服务器通过io.on("connection",function(socket){}响应。
②前端通过socket.send()进行发送，后台通过socket.on('message',function(msg)) 接收，io.mit('message',msg)广播。
后台代码：
// 处理socket
(
function(
window,
document){
var
doc =
document;
var
ele = {
oSendTxt:
document.
getElementsByTagName(
"textarea")[
0],
oCloseBtn:
doc.
getElementsByName(
"close")[
0],
oSendBtn:
doc.
getElementsByName(
"send")[
0],
oRecord:
doc.
getElementById(
"record-box")
};
var
socket =
io.
connect(
"/");
// 获取到用户昵称
var
nickName =
prompt(
'昵称',
"xxx");
if(
nickName){
window.
sessionStorage.
setItem(
'nickName',
nickName);
}
else {
window.
sessionStorage.
setItem(
'nickName',
"NULL");
}
var
userName =
window.
sessionStorage.
getItem(
"nickName");
socket.
send(
userName);
//点击发送键
document.
getElementsByTagName(
"button")[
0].
onclick =
write;
// 回车发送消息
document.
addEventListener(
'keyup',
function(
e){
e =
e||
window.
e;
if(
e.
keyCode ==
'13'){
write();
}
})
function
write(){
var
content =
ele.
oSendTxt.
value;
// 消息为空不发送
if(!
content){
return;
}
else {
ele.
oSendTxt.
value=
"";
socket.
send(
content);
// 将消息添加到记录框
var
item =
document.
createElement(
"div");
item.
className =
"right-div";
item.
innerHTML =
"<em class='photo right-photo'></em><span class='name right-name'>昵称</span><span class='say right-say'>sdv承诺 绍fv</span>"
ele.
oRecord.
appendChild(
item);
}
}
// 如果监听到socket消息，那么执行这个方法并且广播消息
socket.
on(
"message",
function(
mes){
console.
log(
mes);
if(
mes[
'user']){
// 用户加入
}
else {
// 接收消息
var
p =
document.
createElement(
'p');
p.
innerHTML =
mes;
}
})
})(
window,
document);
node刚学，可能写的很丑，忘留下宝贵建议。
前端（html）
扫描二维码关注公众号，回复：
2222246 查看本文章
<
body
>
<
p
id=
"agin"
>刷新重来
</
p
>
<
div
id=
"container"
>
<
div
id=
"head"
>
进来的都是真爱，发给好友试试吧
</
div
>
<
div
id=
"record-box"
>
<
div
id=
"addInfo"
>
qpq加入聊天室
</
div
>
</
div
>
<
div
id=
"friends-box"
>
<
p
>群成员
<
span
>10
</
span
></
p
>
<
ul
id=
"friend-list"
>
<!-- <li><em></em><span>sjkcnb</span></li> -->
</
ul
>
</
div
>
<
div
id=
"send-box"
>
<
div
class=
"function"
>
表情功能，尽情期待……
<
div
class=
"look"
>
<!-- <img src="img/Smile.png" alt="smile" width="100%"> -->
</
div
>
</
div
>
<
textarea
rows=
"8"
cols=
"80"
></
textarea
>
<
div
class=
"btn"
>
<
button
type=
"button"
name=
"close"
>关闭
</
button
>
<
button
type=
"button"
name=
"send"
>发送
</
button
>
</
div
>
</
div
>
</
div
>
</
body
>
css
html,body{
width:
100%;
font-family:
arial;
}
body,p,ul{
margin:
0;
padding:
0;
}
li {
list-style:
none;
}
#container {
position:
relative;
width:
600px;
height:
500px;
margin:
20px
auto;
background-color:
rgb(
226,
232,
249);
box-shadow:
0
0
15px
#ccc;
transition-duration:
.3s;
}
#head {
width:
100%;
height:
40px;
background-color:
rgb(
141,
165,
232);
font-size:
14px;
line-height:
40px;
text-align:
center;
}
/* 好友框 */
#friends-box {
box-sizing:
border-box;
position:
absolute;
right:
0;
top:
40px;
width:
160px;
height:
460px;
overflow-y:
auto;
}
#friends-box p {
font-size:
14px;
/* background-color: #ccc; */
line-height:
40px;
padding-left:
10px;
}
ul#friend-list{
font-size:
13px;
}
ul#friend-list li {
box-sizing:
border-box;
width:
100%;
height:
28px;
padding-left:
10px;
cursor:
default;
}
ul#friend-list li:hover {
background-color:
rgb(
217,
222,
239);
}
ul#friend-list li em {
display:
inline-block;
width:
20px;
height:
20px;
vertical-align:
middle;
border-radius:
50%;
border:
1px
solid
#ccc;
}
ul#friend-list li span {
display:
inline-block;
vertical-align:
middle;
line-height:
28px;
text-indent:
5px;
}
/* 发送框 */
#send-box {
position:
relative;
box-sizing:
border-box;
width:
440px;
height:
calc(
100% -
40px -
325px);
padding-top:
10px;
padding-left:
10px;
border-right:
1px
solid
rgba(
204,
204,
204,
.5);
overflow:
hidden;
}
#send-box textarea {
display:
block;
width:
100%;
height:
70%;
border:
none;
outline:
none;
background-color:
rgb(
226,
232,
249);
font-size:
12px;
font-family:
arial;
resize:
none;
}
#send-box .function {
width:
100%;
height:
25%;
font-size:
10px;
}
.function .look {
width:
30px;
height:
30px;
padding-top:
4px;
text-align:
center;
}
.function .look img {
width:
24px;
height:
24px;
}
.function .look:hover {
background-color:
rgb(
213,
219,
235);
}
#send-box button {
width:
70px;
height:
28px;
border:
0;
border-radius:
3px;
outline:
none;
font-size:
12px;
text-align:
center;
line-height:
28px;
cursor:
pointer;
}
#send-box button[
name=
"close"
] {
background-color:
rgb(
235,
239,
251);
border:
1px
solid
rgb(
182,
189,
203);
margin-right:
10px;
}
#send-box button[
name=
"close"
]:hover {
background-color:
rgb(
239,
239,
240);
}
#send-box button[
name=
"send"
] {
background-color:
rgb(
141,
165,
232);
border:
1px
solid
rgb(
141,
165,
232);
}
#send-box button[
name=
"send"
]:hover {
background-color:
rgb(
166,
184,
237);
}
.btn {
position:
absolute;
bottom:
15px;
right:
15px;
}
/* 聊天记录框 */
#record-box {
position:
relative;
box-sizing:
border-box;
width:
440px;
height:
325px;
padding:
10px
10px
0
10px;
border-bottom:
1px
solid
rgba(
204,
204,
204,
.5);
border-right:
1px
solid
rgba(
204,
204,
204,
.5);
overflow-y:
auto;
color:
#555;
font-size:
12px;
}
#record-box>
div{
position:
relative;
width:
100%;
margin-top:
10px;
}
.left-photo {
left:
0;
}
.left-say {
margin-left:
40px;
}
.left-name {
margin-left:
40px;
}
.right-div {
text-align:
right;
}
.right-photo {
right:
0;
}
.right-name {
margin-right:
40px;
}
.right-say {
margin-right:
40px;
}
#record-box em.photo {
position:
absolute;
top:
0;
width:
30px;
height:
30px;
background-color:
#ccc;
border-radius:
50%;
}
#record-box span.name {
display:
block;
margin-bottom:
5px;
font-size:
10px;
}
#record-box span.say {
box-sizing:
border-box;
display:
inline-block;
max-width:
80%;
padding:
5px;
border-radius:
8px;
background-color:
rgb(
203,
208,
223);
font-size:
14px;
line-height:
20px;
text-align:
left;
}
#addInfo {
position:
fixed;
top:
0;
width:
100%;
text-align:
center;
font-size:
12px;
color:
#ccc;
}
p#agin {
position:
absolute;
top:
0;
bottom:
0;
left:
0;
right:
0;
width:
100%;
margin:
auto;
color:
#ccc;
font-size:
26px;
text-align:
center;
line-height:
400px;
}
.redColor {
color:
red;
}
js
<
script
src=
"https://cdn.bootcss.com/socket.io/2.1.1/socket.io.js"
>
<
/
script
>
<!-- <script src="index.js"></script> -->
<
script
type=
"text/javascript"
>
// 处理socket
(
function(
window,
document){
var
doc =
document;
var
ele = {
oContainer:
doc.
getElementById(
"container"),
oSendTxt:
doc.
getElementsByTagName(
"textarea")[
0],
oCloseBtn:
doc.
getElementsByName(
"close")[
0],
oSendBtn:
doc.
getElementsByName(
"send")[
0],
oRecord:
doc.
getElementById(
"record-box"),
oNickName:
doc.
getElementById(
"nickName"),
oFriendList:
doc.
getElementById(
"friend-list"),
oFriendList_myPhoto:
doc.
querySelector(
"#friend-list li em"),
oFriendList_myName:
doc.
querySelector(
"#friend-list li span"),
oFriendList_num:
doc.
querySelector(
"#friends-box span"),
aFriends:
doc.
getElementById(
"addInfo")
};
// 好友数组
var
friendsList=[];
// 我的用户名
var
userName;
// 用于监听第几次发过来mes.friends，如果是第一次就在好友框加上所有好友否则只加上新增加的好友
var
count =
0;
var
socket =
io.
connect(
"/");
function
Chat(){
// 获取用户昵称
this.
getNickName();
// 发送消息
this.
sendMessage();
// 退出聊天室
this.
out();
// 接收广播消息
this.
receiveMessage();
}
Chat.
prototype = {
// 获取用户昵称
getNickName
:
function(){
var
nickName =
prompt(
'昵称',
"xxx");
if(
nickName){
window.
sessionStorage.
setItem(
'nickName',
nickName);
}
else {
window.
sessionStorage.
setItem(
'nickName',
"NULL");
}
userName =
window.
sessionStorage.
getItem(
"nickName");
socket.
send(
userName);
},
// 发送消息
sendMessage
:
function(){
//点击发送键
document.
getElementsByTagName(
"button")[
1].
onclick =
write;
// 回车发送消息
document.
addEventListener(
'keyup',
function(
e){
e =
e||
window.
e;
if(
e.
keyCode ==
'13'){
write();
}
})
//将消息发送到后台
function
write(){
var
content =
ele.
oSendTxt.
value;
// 消息为空不发送
if(!
content){
return;
}
else {
ele.
oSendTxt.
value=
"";
socket.
send({
"user"
:userName,
"msg"
:content});
}
}
},
out
:
function() {
// 点击退出按钮
document.
getElementsByTagName(
"button")[
0].
onclick =
function(){
var
signOut =
confirm(
"退出聊天室吗?");
if(
signOut) {
console.
log(
'要退出了');
socket.
send({
'out'
:userName});
ele.
oContainer.
style.
cssText =
"height: 0;overflow: hidden";
window.
sessionStorage.
removeItem(
'user');
}
// 卸载页面退出聊天
window.
onbeforeunload =
function(){
socket.
send({
'out'
:userName});
}
}
},
// 接收消息
receiveMessage
:
function(){
// 如果监听到socket消息，那么执行这个方法并且广播消息
socket.
on(
"message",
function(
mes){
count++;
console.
log(
mes);
console.
log(
mes.
user);
console.
log(
mes.
msg);
if(
mes.
friends){
if(
mes.
out) {
var
aFriendLists =
ele.
oFriendList.
getElementsByTagName(
"li");
ele.
aFriends.
innerHTML =
mes.
out+
"退出群聊";
friendsList =
JSON.
parse(
window.
sessionStorage.
getItem(
'friendsList'));
var
key =
friendsList.
indexOf(
mes.
out);
ele.
oFriendList.
removeChild(
aFriendLists[
key]);
// 更新好友信息
window.
sessionStorage.
setItem(
"friendsList",
JSON.
stringify(
mes.
friends));
}
else
if(
mes.
add) {
console.
log(
count);
// var friStr = mes.friends.join(',');
var
addFri =
mes.
add;
if(
addFri==
userName) {
ele.
aFriends.
innerHTML =
"'我'"+
"加入聊天室";
}
else {
ele.
aFriends.
innerHTML =
'"'+
addFri+
'"'+
"加入聊天室";
}
// 保存好友信息
window.
sessionStorage.
setItem(
'friendsList',
JSON.
stringify(
mes.
friends));
ele.
oFriendList_num.
innerHTML =
mes.
friends.
length;
if(
count==
1){
// 用户加入
var
frag =
document.
createDocumentFragment();
for(
var
i=
0,
len=
mes.
friends.
length;
i<
len;
i++) {
var
item =
document.
createElement(
'li');
if(
mes.
friends[
i]==
userName) {
item.
innerHTML =
"<em></em><span class='redColor'>"+
mes.
friends[
i]+
"</span>";
}
else {
item.
innerHTML =
"<em></em><span>"+
mes.
friends[
i]+
"</span>";
}
frag.
appendChild(
item);
}
ele.
oFriendList.
appendChild(
frag);
}
else {
var
item =
document.
createElement(
'li');
item.
innerHTML =
"<em></em><span>"+
mes.
add+
"</span>";
ele.
oFriendList.
appendChild(
item);
}
}
}
else {
// 接收消息
if(
mes.
user==
userName){
var
item =
document.
createElement(
"div");
item.
className =
"right-div";
item.
innerHTML =
"<em class='photo right-photo'></em><span class='name right-name'>"+
userName+
"</span><span class='say right-say'>"+
mes.
msg+
"</span>";
ele.
oRecord.
appendChild(
item);
}
else {
console.
log(
'不是我');
var
saying =
document.
createElement(
'div');
saying.
innerHTML =
"<em class='photo left-photo'></em><span class='name left-name'>"+
mes.
user+
"</span><span class='say left-say'>"+
mes.
msg+
"</span>";
ele.
oRecord.
appendChild(
saying);
}
}
})
}
}
var
char =
new
Chat();
})(
window,
document);
<
/
script
>
github: https://github.com/COMINGLIU/socket-chat-online/tree/master/chat