一分钟实现网页多人聊天室【Socket.IO】
socket.io是个基于node.js的快平台实时通讯框架。
只用不到10行代码,就可以搭建一个简单的多人实时聊天室。
安装node.js
由于socket.io使用node.js为服务端,所以必须安装node.js
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,
使其轻量又高效。Node.js 的包管理器 npm,
是全球最大的开源库生态系统。
编写package.json
新建一个项目文件夹,编写package.json文件来描述项目的信息和依赖关系
{
"name": "socket-chat-example",
"version": "0.0.1",
"description": "my first socket.io app",
"dependencies": {}
}
编写index.js -服务端代码
//使用express模块快速搭建web服务器
var express = require('express');
var app = express();
var http = require('http').Server(app);
//使用socket.io监听事件
var io = require('socket.io')(http);
//使用express发送css js等静态资源
app.use(express.static('public'));
//express获得GET请求时将index.html文件返回给浏览器
app.get('/',function(req,res){
res.sendFile(__dirname + '/index.html');
});
//socket监听连接事件
io.on('connection', function(socket){
console.log('一个用户上线了');
//socket监听失去连接的事件
socket.on('disconnect', function(){
console.log('一个用户下线了');
});
//当socket监听到了'chat message'事件
socket.on('chat message', function(msg){
//将收到的信息返回给所有客户端
io.emit('chat message',msg);
});
});
//服务器监听端口3000
http.listen(3000,function(){
console.log('listening on *:3000');
})
cd到当前目录,并在命令行用npm安装express和socket.io
编写index.html
Socket.IO chat
最后,在命令行中输入node index.js
在浏览器上输入http://localhost:3030
就可以开始多窗口聊天啦!
教学例子
client.js
const net = require('net');
const client = net.connect({port: 8888}, () => {
// 'connect' listener
console.log('连上去了~!');
});
client.on('data', (data) => {
console.log('收到数据');
console.log(data.toString());
});
client.on('end', () => {
console.log('断开了');
rl.close();
});
const readline = require('readline');
const rl = readline.createInterface(process.stdin, process.stdout);
console.log('多人聊天室');
// console.log('1.进入聊天室');
console.log('88.不聊了走人~');
rl.setPrompt('随便说点什么吧~> ');
rl.prompt();
rl.on('line', (line) => {
switch(line.trim()) {
// case '1':
// console.log('连接聊天服务中');
// break;
case '88':
console.log('欢迎下次再来~玩耍哦~~!');
rl.close();
break;
default:
s=line.trim();
client.write(s+'\r\n');
rl.setPrompt('随便说点什么吧~> ');
rl.prompt();
break;
}
}).on('close', () => {
console.log('记得回来继续聊.');
process.exit(0);
});
server.js
var net = require('net');
var server = net.createServer((socket) => {
var time = getTime();
//加入一个标志
//加入到客户列表中
var name = clients.add( socket );
//接收客户发过来的信息
socket.on('data', function(data) {
// guangbo(data, socket);// 接受来自客户端的信息
console.log('收到数据啦---' );
console.log(data.toString());
//发送给所有人
clients.sendAll(socket,data);
});
//客户关闭了连接
socket.on('close', function(data) {
console.log('客户走了~: ' + socket.remoteAddress + ' ' + socket.remotePort);
//删除客户
clients.del(socket);
//发送给所有人
clients.sendAll(socket, '有人走了!当前聊天人数:' + clients.length());
});
console.log('有人连了,客户端数量:'+ clients.length() );
console.log('有人连了,客户端数量:'+ clients.length() );
socket.write(time +' 欢迎进来聊天~ ' + name + '!\n' + '当前聊天人数:' + clients.length());
clients.sendAll(socket, '有人进来了!当前聊天人数:' + clients.length());
}).on('error', (err) => {
// handle errors here
throw err;
});
clients = new Object();
clients.list = [];
//添加客户端到客户列表
/*
socket 当前的连接
*/
clients.add = function(socket){
socket.name = socket.remoteAddress + ':' + socket.remotePort;
this.list.push(socket);
return socket.name;
}
//从客户端列表删除
/*
socket 当前的socket
*/
clients.del = function(socket){
console.log('用户要走了!删除他!!');
for(var i=0 ; i < this.list.length ; i++){
if(socket == this.list[i]){
console.log('用户要走了!已经删除了~~~');
this.list.splice(i,1);
}
}
}
//把信息发给全部人
/*
socket 当前的连接
data 要发送的数据
*/
clients.sendAll = function(socket,data){
console.log('开始发送给全部人啦!!');
for(var i=0 ; i < this.list.length ; i++){
if(socket !== this.list[i]){
var o = this.list[i];
//检查socket是否可以写
if (o.writable) {
console.log('发送给:' + o.name);
o.write('-----\n' + getTime() + '\n' + socket.name + '说:\n');
o.write(data);
o.write('-----');
} else {
console.log('socket 失效了:' + o.name);
//socket断开了什么的,就不能发送啦,需要删除这个连接
this.del(o);
}
}
}
}
clients.length = function(){
return this.list.length;
}
// 对Date的扩展,将 Date 转化为指定格式的String
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符,
// 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
// 例子:
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
// (new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
function getTime(){
return new Date().Format("yyyy-MM-dd hh:mm:ss");
}
//开启聊天服务器~~
server.listen({
host: 'localhost',
port: 8888,
exclusive: true
});
index.html
chat.js
var express = require('express');
var router = express.Router();
var socket_io = require('socket.io');
var db = require('../model/mongoose');
/* GET users listing. */
router.get('/', function (req, res, next) {
res.send('respond with a resource');
});
router.prepareSocketIO = function (server) {
var io = socket_io.listen(server);
var clientList = [];
var interlocutors = [];
io.sockets.on('connection', function (socket) {//连接
clientList.push(socket);
console.log("连接人数:" + clientList.length);
console.log("连接数据" + socket);
socket.on('join', function (user) {//获取名称
socket.user = user;
var socketusers ={ user_name:user}
db.socketuserModel.findOne(socketusers,function(error, result){
console.log('he'+result+error);
if(result ==null ){
db.socketuserModel.create(socketusers, function(error){});
}
});
//socket.emit('state', 'SERVER', true);
//socket.broadcast.emit('state', 'SERVER', user + '上线了');//广播名字
});
socket.on('sendMSG', function (msg) {//发送内容存入数据库
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
var times = year+'年'+month+'月'+day+'日 '+hour+':'+minute+':'+second;
var socketusersmsg ={ user_name:socket.user,send_msg:msg,send_time:times}
db.socketusermsgModel.create(socketusersmsg, function(error){});
socket.emit('chat', socket.user, msg);
socket.broadcast.emit('chat', socket.user, msg);//广播内容
});
socket.on('getMSG', function (msg) {//获取聊天记录
var usersmsg ={ user_name:socket.user}
db.socketusermsgModel.find(usersmsg,function(error, result){
console.log('he'+result+error);
for(var i=0;i