一分鐘實現(xiàn)網(wǎng)頁多人聊天室【Socket.IO】
socket.io是個基于node.js的快平臺實時通訊框架。
只用不到10行代碼档址，就可以搭建一個簡單的多人實時聊天室血崭。
安裝node.js
由于socket.io使用node.js為服務(wù)端嚷闭，所以必須安裝node.js
Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運(yùn)行環(huán)境。
Node.js 使用了一個事件驅(qū)動眯杏、非阻塞式 I/O 的模型今瀑，
使其輕量又高效。Node.js 的包管理器 npm且警，
是全球最大的開源庫生態(tài)系統(tǒng)。
編寫package.json
新建一個項目文件夾礁遣，編寫package.json文件來描述項目的信息和依賴關(guān)系
{
"name": "socket-chat-example",
"version": "0.0.1",
"description": "my first socket.io app",
"dependencies": {}
}
編寫index.js -服務(wù)端代碼
//使用express模塊快速搭建web服務(wù)器
var express = require('express');
var app = express();
var http = require('http').Server(app);
//使用socket.io監(jiān)聽事件
var io = require('socket.io')(http);
//使用express發(fā)送css js等靜態(tài)資源
app.use(express.static('public'));
//express獲得GET請求時將index.html文件返回給瀏覽器
app.get('/',function(req,res){
res.sendFile(__dirname + '/index.html');
});
//socket監(jiān)聽連接事件
io.on('connection', function(socket){
console.log('一個用戶上線了');
//socket監(jiān)聽失去連接的事件
socket.on('disconnect', function(){
console.log('一個用戶下線了');
});
//當(dāng)socket監(jiān)聽到了'chat message'事件
socket.on('chat message', function(msg){
//將收到的信息返回給所有客戶端
io.emit('chat message',msg);
});
});
//服務(wù)器監(jiān)聽端口3000
http.listen(3000,function(){
console.log('listening on *:3000');
})
cd到當(dāng)前目錄,并在命令行用npm安裝express和socket.io
編寫index.html
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
var socket = io();
$('form').submit(function(){
//點擊發(fā)送按鈕斑芜，提交輸入的信息
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
//接收到chat message時
socket.on('chat message', function(msg){
//將chat message顯示在頁面
$('#messages').append($('<li>').text(msg));
});
</script>
</body>
</html>
最后，在命令行中輸入node index.js
在瀏覽器上輸入http://localhost:3030
就可以開始多窗口聊天啦祟霍！
教學(xué)例子
client.js
const net = require('net');
const client = net.connect({port: 8888}, () => {
// 'connect' listener
console.log('連上去了~!');
});
client.on('data', (data) => {
console.log('收到數(shù)據(jù)');
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.進(jìn)入聊天室');
console.log('88.不聊了走人～');
rl.setPrompt('隨便說點什么吧～> ');
rl.prompt();
rl.on('line', (line) => {
switch(line.trim()) {
// case '1':
// console.log('連接聊天服務(wù)中');
// 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('記得回來繼續(xù)聊.');
process.exit(0);
});
server.js
var net = require('net');
var server = net.createServer((socket) => {
var time = getTime();
//加入一個標(biāo)志
//加入到客戶列表中
var name = clients.add( socket );
//接收客戶發(fā)過來的信息
socket.on('data', function(data) {
// guangbo(data, socket);// 接受來自客戶端的信息
console.log('收到數(shù)據(jù)啦---' );
console.log(data.toString());
//發(fā)送給所有人
clients.sendAll(socket,data);
});
//客戶關(guān)閉了連接
socket.on('close', function(data) {
console.log('客戶走了~: ' + socket.remoteAddress + ' ' + socket.remotePort);
//刪除客戶
clients.del(socket);
//發(fā)送給所有人
clients.sendAll(socket, '有人走了!當(dāng)前聊天人數(shù):' + clients.length());
});
console.log('有人連了,客戶端數(shù)量:'+ clients.length() );
console.log('有人連了,客戶端數(shù)量:'+ clients.length() );
socket.write(time +' 歡迎進(jìn)來聊天~ ' + name + '!\n' + '當(dāng)前聊天人數(shù):' + clients.length());
clients.sendAll(socket, '有人進(jìn)來了!當(dāng)前聊天人數(shù):' + clients.length());
}).on('error', (err) => {
// handle errors here
throw err;
});
clients = new Object();
clients.list = [];
//添加客戶端到客戶列表
/*
socket 當(dāng)前的連接
*/
clients.add = function(socket){
socket.name = socket.remoteAddress + ':' + socket.remotePort;
this.list.push(socket);
return socket.name;
}
//從客戶端列表刪除
/*
socket 當(dāng)前的socket
*/
clients.del = function(socket){
console.log('用戶要走了!刪除他!!');
for(var i=0 ; i < this.list.length ; i++){
if(socket == this.list[i]){
console.log('用戶要走了!已經(jīng)刪除了~~~');
this.list.splice(i,1);
}
}
}
//把信息發(fā)給全部人
/*
socket 當(dāng)前的連接
data 要發(fā)送的數(shù)據(jù)
*/
clients.sendAll = function(socket,data){
console.log('開始發(fā)送給全部人啦!!');
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('發(fā)送給:' + o.name);
o.write('-----\n' + getTime() + '\n' + socket.name + '說:\n');
o.write(data);
o.write('-----');
} else {
console.log('socket 失效了:' + o.name);
//socket斷開了什么的,就不能發(fā)送啦,需要刪除這個連接
this.del(o);
}
}
}
}
clients.length = function(){
return this.list.length;
}
// 對Date的擴(kuò)展杏头，將 Date 轉(zhuǎn)化為指定格式的String
// 月(M)盈包、日(d)、小時(h)醇王、分(m)呢燥、秒(s)、季度(q) 可以用 1-2 個占位符寓娩，
// 年(y)可以用 1-4 個占位符疮茄，毫秒(S)只能用 1 個占位符(是 1-3 位的數(shù)字)
// 例子：
// (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");
}
//開啟聊天服務(wù)器~~
server.listen({
host: 'localhost',
port: 8888,
exclusive: true
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="javascripts/jquery-1.11.1.min.js"></script>
<script src="javascripts/socket.io-1.4.5.js"></script>
<style>
*{padding: 0;margin: 0}
p{}
table {
width: 100%;
}
.p2{background: pink;}
.p1{background: rgb(106, 216, 255);}
.p1,.p2{border: 1px solid pink;padding: 10px;border-radius: 5px;display:inline-block}
span{margin: 5px 0px;}
table.tool {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
}
#content {
height: auto;
padding: 10px;
padding-bottom: 32px;
}
#content tr {
margin-bottom: 10px;
}
#textContent {
border: 1px solid rgb(106, 216, 255);
border-radius: 5px;
padding: 6px;
}
.left {
width: 75%;
}
#send {
width: auto;
padding: 2px 12px;
margin: 0 10px;
line-height: 26px !important;
border-radius: 5px;
font-weight: bold;
color: white;
border: 0px;
background-color:rgb(106, 216, 255);
}
#findmsg {
width: auto;
padding: 2px 12px;
line-height: 26px !important;
border-radius: 5px;
font-weight: bold;
color: white;
border: 0px;
background-color:pink;
}
.timer {
display: block;
text-align: center;
}
</style>
</head>
<body style="background: url(images/47.jpg) ;background-repeat: no-repeat;background-size:100%">
<div>
<table id="content">
</table>
</div>
<table class="tool">
<tr>
<td class="left">
<div id="textContent" contenteditable="true" type="text"></div>
</td>
<td>
<button id="send">發(fā)送</button>
<!--
<button id="findmsg">查看聊天記錄</button>
-->
</td>
</tr><div id="nav"></div>
</table>
<script>
var socket = io.connect('http://192.168.105.253:3000');
var userName = "訪客某某";
socket.on('connect', function () {
userName = prompt("請輸入你的姓名?") || userName;
socket.emit('join', userName);
});
socket.on('chat', function (user, data) {
var p = document.createElement('tr');
var direct = 'align-left';
if (user === userName) {
direct = 'align-right';
p.innerHTML = '<td><p>' + user + '</p><p class="p1">' + data + '</p></td>';
} else {
p.innerHTML = '<td style="text-align:right"><p>' + user + '</p><p class="p2">' + data + '</p></td>';
}
p.className = direct;
$('#content').appendChild(p);
});
$('#send').addEventListener('click', function (target) {
var content = $('#textContent').innerHTML;
if (content = content.replace(" ", "")) {
socket.emit('sendMSG', content);
$('#textContent').innerHTML = "";
}
});
$('#findmsg').addEventListener('click', function (target) {
socket.emit('getMSG', content);
});
function $(flag) {
return document.querySelector(flag);
}
</script>
</body>
</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("連接人數(shù)：" + clientList.length);
console.log("連接數(shù)據(jù)" + 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) {//發(fā)送內(nèi)容存入數(shù)據(jù)庫
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);//廣播內(nèi)容
});
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<result.length;i++){
console.log(result[i].send_msg);
}
})//.sort({send_time:-1}).limit(1);
//socket.emit('chat', socket.user, msg);
//socket.broadcast.emit('chat', socket.user, msg);
});
});
};
module.exports = router;
