基于node.js的简单在线聊天室
1.服务端
- 提供web服务
- 接收客服端所发送的消息
- 主动向客服端发送消息
2.客户端
- 接收服务端所发送的消息
- 连接到聊天服务器
- 发送消息到服务端
客户端与服务端的关系图
一般的请求协议都是HTTP或HTTPS请求协议，HTTP协议是一种无状态协议，由于HTTP协议是基于请求/响应范式的(相当于客户机/服务器 )，只能通过客服端请求服务端才会响应，不会主动发送信息给客服端，所以不能适用于聊天室的访问协议，所以我们只能通过Socket协议来进行访问，它可以主动接收和主动发送，并且不需要任何请求的。
了解客服端与服务端的关系后我们就可以来做项目了
首先我们需要用node.js搭建一个web服务器，这里我们可以去官网下载一个Node.js中文网
有了node.js后我们在项目中创建一个server.js文件作为我们的客户端，在我们的客户端搭建服务器，搭建服务器引入一个HTTP模块，这个模块是node.js官方中给我们引用的标准模块，有兴趣的可以去官网自己看看
我们通过下面这个代码引入HTTP模块
var http = require("http");//引入一个模块
然后我们再搭建一个web服务实例
var server = http.createServer();//搭建一个web服务实例
然后我们必须要有一个监听端口，一般默认端口都是8080，node.js常用端口是3000
server.listen("3000");//监听端口
这样我们一个简单的web服务器就搭建成功了，然后我们可以运行服务器了，我们可以用cmd命令行来运行
windows键+R,输入cmd打开命令提示符，然后进入我们的项目文件，然后输入node server.js(你的服务器名.js)如图下:
出现上面的这些信息就说明你的服务器已经运行成功了
运行成功后我们就可以访问了，我们打开浏览器在URL地址栏中输入localhost:和你刚才定义的监听端口
然后进行访问，这个时候我们会看到页面一直在加载，这是因为我们服务器还没有返回任何东西，这个时候我们可以通过刚才的web实例进行连接处理，然后创建一个html页面作为返回页面
var http = require("http");//引入一个模块
var fs = require("fs"); //引入文件系统模块
var server = http.createServer(function(req,res){
//对当前连接web服务器进行处理
//引入文件流
var html = fs.readFileSync("./dome.html");
res.end(html);//向连接的客户端发送响应
});//搭建一个web服务实例
server.listen("3000");//监听端口
dome.html
这是我们的聊天客户端
创建好后我们再重新运行服务器再次在浏览器中输入刚才的端口进行访问
这个时候我们就可以访问到页面了:
然后我们还要搭建一个基于Socket协议的web聊天室服务端
首先我们需要一个socket.io模块，这个模块我们可以去npm官网找这个模块socket.io官网，打开页面后，我们直接可以在命令行里面输入命令下载模块
如图下:
下载完毕后你的项目文件里面就可以有一个包，里面有许多依赖文件，有兴趣的可以去看看
然后再在我们的server.js文件里面引入socket.io包
var ws = require("socket.io");
然后我们再在监听端口后面再生成io实例，让它们两个产生联系(用同一个地址，但端口不同)
var io = ws(server);//生成socket服务端 用户可以直接通过访问web服务端的地址直接连接到socket服务器
然后我们再要用Io实例在socket服务中监听连接事件，并且广播出去
io.on("connection",function(client){
client.on("message",function(mes){
io.emit("message",mes);//io服务端主动发消息给所有的已连接的客户端
});//监听到实例所发送过来的消息
});//在socket服务中监听连接事件
监听事件写好后，我们就可以来制作聊天室了，这里我们还需要引入一个socket.io.min.js文件，这个文件可以自己去网上找，引入后js文件中也会产生一个io实例
var client = io.connect("/");//连接socket服务端
再获取聊天框和发送按钮
var oMes = document.getElementById('mes'), //获取聊天框
oSend = document.getElementById('send'); //获取发送按钮
然后再写发送按钮的点击事件
oSend.onclick = function () {
var val = oMes.value;//获取文本框的内容或消息
//判断文本框是否有内容，如果有则向服务端发送消息，如果没有就什么都不做
if (!val) {
return;
}
client.send(val);//客户端向服务端发送消息
oMes.value = ""; //发送完成后清空文本框
}
//监听并广播消息
client.on("message",function(date){
//创建一个p标签
var p = document.createElement("p");
//把消息在p标签内显示出来
p.innerHTML = date;
document.body.appendChild(p);
});
接着我们一个简单的web聊天室就完成了,消息能够实时更新
最后我们把页面美化一下发布上线就可以实现在线聊天了