一个简易的聊天室demo
基于:
- express
- socket.io
这几天在学习socket.io,所以就写一点自己的心得,分享一下。
Q:socket.io能干什么?
A:socket.io可以保证客户端和服务器端间的实时通讯。
通过几个简单的步骤就可以创建简易的聊天室
在index.js中:
1.首先我们要引入express,借用express来规划路由
var express = require('express');
var app = express();
也可以简写:
var app = require('express')();
然后配置路由
app.get('/',function(req,res){
//code...
res.send('welcome to chatroom');
});
2.引入http“骨架”,载入express实例
var server = require('http').createServer(app);
顺手把监听的端口给配了~
server.listen(3000)
通常简单可以如上这么写,但是不是很好看,所以我们还可以做一些配置:
var port = process.env.PORT || 3000;
server.listen(port,function(){
console.log('server port on %d',port);
});
整理下:
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var port = process.env.PORT || 3000;
app.get('/',function(req,res){
//code...
res.send('welcome to chatroom');
});
server.listen(port,function(){
console.log('server port on %d',port);
});
现在启动server
node index.js
打开你最爱的浏览器,输入
http://localhost:3000
一切顺利的话,可以看见
我们继续现在,我们引入socket.io,并传入http对象
var io = require('socket.io')(server);
(这里我的理解是socket.io依赖于http,所以需要将http传入socket.io)
现在我们注册一个连接
io.on('connection',function(socket){
console.log('a user connected');
});
新建一个目录public
public里新建index.html,main.js,style.css文件
在index.html中:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
在</body>前,引入script
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="/socket.io/socket.io.js"></script>
现在我们还需要引入main.js和style.css,这里有个小细节,我们回到之前的index.js文件中,配置一个路径
app.use(express.static(__dirname + '/public'));
并且修改路由内容
app.get('/', function (req, res) {
res.sendFile('index.html');
});
(由于我们在express中配置了public目录的路径,所以在public中的文件,我们可以直接用)
回到index.html中,继续~
现在我们就可以愉快的引入style.css和main.js文件了
<link rel="stylesheet" href="style.css" type="text/css">
在此后引入
<script src="/socket.io/socket.io.js"></script>
<script src="main.js"></script>
引入完毕,添加html中的基本dom元素
<ul id="message"></ul>
<form action="">
<input type="text" id="input"><button type="submit">Send</button>
</form>
在style.css中:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#message {
padding: 20px;
font: 20px Arial, Helvetica;
width: 95%;
list-style-type: none;
margin: 10px auto;
/*box-shadow: -3px 3px 5px #888;*/
box-shadow:
2px 0 3px #888,
0 2px 3px #888,
0 2px 3px #888,
2px 0 3px #888;
min-height: 300px;
border-radius: 5px;
}
#messages li {
padding: 10px 10px;
}
#messages li:nth-child(odd) {
background: #eee;
}
form {
background: #000000;
padding: 5px;
position: fixed;
bottom: 0;
width: 100%;
}
#input {
border: 0;
padding: 5px 7px;
width: 90%;
}
form button {
width: 10%;
background: rgb(130, 224, 255);
border: none;
padding: 5px;
}
现在咱们的chatroom应该是酱紫的
现在试着多开几个浏览器窗口,咱们会发现控制台会打印多个
“a user connected”的字样
在main.js中:
var socket = io();
$('button[type=submit]').click(function(){
socket.emit('chat message', $('#input').val());
$('#input').val('');
return false;
});
socket.on('chat message', function (data) {
$('#message').append($('<li>').text(data));
});
这个socket可以理解为客户端的通信接口
var socket = io();
并对button添加了一个点击事件,点击后发射事件“chat message”,数据为input里的value,最后清空input。
$('button[type=submit]').click(function(){
socket.emit('chat message', $('#input').val());
$('#input').val('');
return false;
});
这里(客户端)注册了“chat message”的事件,来将data显示在ul列表里。
socket.on('chat message', function (data) {
$('#message').append($('<li>').text(data));
});
现在我们再回到index.js中:
修改如下:
io.on('connection', function (socket) {
console.log('a user connected');
socket.on('chat message', function (data) {
io.emit('chat message',data);
});
socket.on('disconnect', function () {
console.log('a user left');
});
});
注意,我们先注册了一个服务器端的chat message事件(为了接受客户端的data),然后发射了一个客户端的chat message事件(为了传值给客户端),这两个事件虽然名字相同,但是完全是两回事!
socket.on('chat message', function (data) {
io.emit('chat message',data);
});
总览
socket.io说白了就是在客户端与服务器端间来回通信,整明白谁是谁就好理解了。
index.js代码:
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io')(server);
var port = process.env.PORT || 3000;
app.use(express.static(__dirname + '/public'));
app.get('/', function (req, res) {
res.sendFile('index.html');
});
io.on('connection', function (socket) {
console.log('a user connected');
socket.on('chat message', function (data) {
io.emit('chat message',data);
});
socket.on('disconnect', function () {
console.log('a user left');
})
});
server.listen(port, function () {
console.log('server start on port : %d',port);
});
main.js代码:
var socket = io();
$('button[type=submit]').click(function(){
socket.emit('chat message', $('#input').val());
$('#input').val('');
return false;
});
socket.on('chat message', function (data) {
$('#message').append($('<li>').text(data));
});
index.html代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>socket.io chatroom</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<ul id="message"></ul>
<form action="">
<input type="text" id="input"><button type="submit">Send</button>
</form>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="main.js"></script>
</body>
</html>
style.css代码:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#message {
padding: 20px;
font: 20px Arial, Helvetica;
width: 95%;
list-style-type: none;
margin: 10px auto;
/*box-shadow: -3px 3px 5px #888;*/
box-shadow:
2px 0 3px #888,
0 2px 3px #888,
0 2px 3px #888,
2px 0 3px #888;
min-height: 300px;
border-radius: 5px;
}
#messages li {
padding: 10px 10px;
}
#messages li:nth-child(odd) {
background: #eee;
}
form {
background: #000000;
padding: 5px;
position: fixed;
bottom: 0;
width: 100%;
}
#input {
border: 0;
padding: 5px 7px;
width: 90%;
}
form button {
width: 10%;
background: rgb(130, 224, 255);
border: none;
padding: 5px;
}
新人第一篇博客,如有不足多多包涵,理解有误之处望指正,谢谢。
github:qianjiahao
本文参考自socket.io
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。