需求分析
1、兼容不支持WebSocket的低版本浏览器。
2、允许客户端有相同的用户名。
3、进入聊天室后可以看到当前在线的用户和在线人数。
4、用户上线或退出，所有在线的客户端应该实时更新。
5、用户发送消息，所有客户端实时收取。
需要软件
Node.js 可以去官网下载, 链接:http://www.nodejs.org/download/
安装注意
安装时默认选择安装目录或者你也可以自定义安装目录, 这个不重要.
是否已成功安装
开始键+R 打开运行窗口输入cmd, 在里面输入node –v 会有提示版本号, 如下图:
这时证明程序已经成功安装.
接下来我们开始搭建环境
1. 在你的网站根目录www下新建一个文件夹, 命名为node, 在里面新建一个名为 package.json的文件，内容如下：
{
"name": "realtime-server",
"version": "0.0.1",
"description": "my first realtime server",
"dependencies": {}
}
如图:
保存后关闭.
2. 接下来使用npm命令安装express和socket.io. 首先在运行窗口进入到上一步创建的node文件夹中(不进入node文件夹就直接输入下面的代码会将express和socket.io安装到一个未知的位置, 这个并不是我们想要的), 并在运行处输入以下代码:
npm install --save express
npm install --save socket.io
如图:
都是产生一堆的错误, 也不用管. 你要管也行, 自行网上找答案, 我这里就不说了.
好了, 两句代码敲完执行完, 你会发现你的node文件夹下有一个node_modules文件夹:
这个就表明你已经安装成功, 服务器已经搭建好了.
3. 编写服务器端代码.
在node文件夹里面创建一个index.js文件, 内容为:
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
res.send('<h1>Welcome to Websocket World!</h1>');
});
http.listen(3000, function(){
console.log('listening on *:3000');
});
其中3000是端口号, 如果你的3000端口号被占用了, 那么换一个.
然后在黑框框中输入node index.js会出现以下, 如图:
那么就表示服务已经开启成功, 正在监控3000端口, 还是那句话, 注意路径, 不要被无关的细节影响了整个实验的进行.
接着在浏览器中输入127.0.0.1:3000
好了, 服务器的开启测试完成.
接下来开始做在线聊天系统
1. 将刚才写的index.js文件的内容替换成以下内容:
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
res.send('<h1>Welcome to Websocket World!</h1>');
});
//在线用户
var onlineUsers = {};
//当前在线人数
var onlineCount = 0;
io.on('connection', function(socket){
console.log('a user connected');
//监听新用户加入
socket.on('login', function(obj){
//将新加入用户的唯一标识当作socket的名称，后面退出的时候会用到
socket.name = obj.userid;
//检查在线列表，如果不在里面就加入
if(!onlineUsers.hasOwnProperty(obj.userid)) {
onlineUsers[obj.userid] = obj.username;
//在线人数+1
onlineCount++;
}
//向所有客户端广播用户加入
io.emit('login', {onlineUsers:onlineUsers, onlineCount:onlineCount, user:obj});
console.log(obj.username+'加入了聊天室');
});
//监听用户退出
socket.on('disconnect', function(){
//将退出的用户从在线列表中删除
if(onlineUsers.hasOwnProperty(socket.name)) {
//退出用户的信息
var obj = {userid:socket.name, username:onlineUsers[socket.name]};
//删除
delete onlineUsers[socket.name];
//在线人数-1
onlineCount--;
//向所有客户端广播用户退出
io.emit('logout', {onlineUsers:onlineUsers, onlineCount:onlineCount, user:obj});
console.log(obj.username+'退出了聊天室');
}
});
//监听用户发布聊天内容
socket.on('message', function(obj){
//向所有客户端广播发布的消息
io.emit('message', obj);
console.log(obj.username+'说：'+obj.content);
});
});
http.listen(3000, function(){
console.log('listening on *:3000');
});
以上是服务器端的代码, 回顾一下, 如图:
2. 在www网站根目录下新建一个文件夹,作为客户端来访问的, 命名为demo, 里面有四个文件. 由于代码略多,我就不直接发代码了 在文最下面我会给出整个项目的源码链接下载地址!
3. 好了, 客户端的代码也是完成了的. 打开黑框框, 重新启动一下服务器:
4. 在浏览器中输入localhost/demo/index.html, 出现这个界面:
输入用户名后进入
Ok, 成功了, 想测试多人的, 就多开几个浏览器:
至此, 整个实验就完成了.
