我此前曾发过一遍文章有关于如何利用node.js+websocket搭建一个简单的多人聊天室有兴趣的朋友可以关注我的技术客栈---涛涛技术客栈。今天学习了websocket的一个框架---socket.io后瞬间感觉神清气爽，顿感从无尽的回调函数中解脱出来，今天我将继续就多人聊天室这个demo来和大家分享一下如何利用socket.io来创建它。
安装socket.io所需的包
众所周知，node.js采用了包结构进行管理，所以我们在使用一些模块（modules）时必须使用npm(install package managment,即安装包管理工具)安装socket.io,安装时仍需安装在你的node.js中npm的node_modules目录下，例如在我的电脑中的安装路径是这样的：D:Node.jsnode_modulesnpmnode_modules
最后只有npm install -g socket.io安装socket.io（必须使用-g进行全局安装），接下来进行项目的编写。
创建客户端
客户端如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>websocket</title>【1】 <script type="text/javascript" src="socket.io-1.3.7.js"></script>
</head>
<body>
<center><h1>ChatRoom</h1></center>
<hr>
<input type="text" id="sendTxt">
<br>
<button id="sendBtn">发送</button>
<script type="text/javascript">【2】 var socket = io("ws://localhost:3000");
document.getElementById(‘sendBtn‘).onclick = function()
{
var txt = document.getElementById(‘sendTxt‘).value;
if(txt){【3】 socket.emit(‘message‘,txt);
}
}
**socket.on(‘enter‘,function(data){【4】 showMessage(data,‘enter‘);
})**
**socket.on(‘message‘,function(data){【5】 showMessage(data,‘message‘);
})**
**socket.on(‘left‘,function(data){
showMessage(data,‘left‘);【6】 })**
function showMessage(str,type)
{
var div = document.createElement(‘div‘);
div.innerHTML = str;
if(type=="enter"){
div.style.color = "blue";
}else if(type=="left"){
div.style.color = "red";
}
document.body.appendChild(div);
}
</script>
</body>
</html>说明：代码中重要的部分我都进行了加粗并进行编号，下面我们来分析这些重要的代码。
- 首先将socket.io的包拷贝到你的项目文件下，并在head部分使用script标签将其添加进去
- 使用socket.io专业的函数创建一个websocket端点
- 当在消息框输入消息并点击发送按钮时，客户端就将向服务器端发送输入的消息，消息类型是message。
- 当有新的用户进入聊天室时，服务器就会向全部的客户端广播这样一条消息：userxx comes in
- 当任意一个客户端向服务器发送消息时，服务器就会将这条消息广播给全部的客户端。
- 当有任一客户端离开时，服务器就会向全部客户端广播这样一条消息：userxx left
创建服务器端
服务器端代码：
【1】 var app = require(‘http‘).createServer()
【2】 var io = require(‘socket.io‘)(app)
var PORT = 3000
var clientCount = 0
【3】 app.listen(PORT)
【4】 io.on(‘connection‘,function(socket){
clientCount++
socket.nickname = ‘user‘+clientCount【5】 io.emit(‘enter‘,socket.nickname+" comes in")
【6】 socket.on(‘message‘,function(str){
**io.emit(‘message‘,socket.nickname+‘ say:‘+str)**
})【7】 socket.on(‘disconnect‘,function(){
io.emit(‘left‘,socket.nickname+" left")
})
})
console.log("websocket listening on port:"+PORT)很显然使用了socket.io来创建服务器端非常简洁、方便，大家是不是感觉这代码看起来就很清爽呀。代码中的重要部分我都进行了加粗标记及编号处理，下面我跟大家分享一下重要的代码。
- 首先我们需要一个绑定使用http协议的变量：app
- 接下来我们还需要创建一个使用socket.io这个modules的变量并且绑定http变量
- 这个绑定了http的变量也需要监听服务器端的端口号
- 当有一个客户端与服务器端进行连接时就调用回调函数
- 接下来当触发“enter”事件时服务器端向客户端广播这样一条消息：userxx comes in
- 当有客户端向服务器端发送消息时就会触发message事件，这时服务器端向全部客户端广播该客户端向服务器端发送的消息。
- 当有客户端关闭时socket.io就会调用自身的disconnect事件，并且向全部客户端广播这样一条消息，userxx left。
以上就是关于我分享使用socket.io来创建一个简单的多人聊天室的一个小demo，以为大家积极评论。最后附上项目运行的结果截图及源码下载地址。
项目源码地址是：
链接：http://pan.baidu.com/s/1qXVhYuo 密码：2x2c
