简易socket.io demo - 快车库

一个简易的聊天室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