最近在看socket.io，想理一理思绪。

先丢一堆问题：

  • 什么是WebSocket？有什么用？
  • 什么是socket.io，跟WebSocket的关系？
  • socket跟Ajax的区别？
  • 怎么使用socket.io?

WebSocket

WebSocket是对在服务器和客户端之间实现双向实时通信问题的响应。就是在web服务器和浏览器之间保持持久打开，相当于建了一座桥，让两边的信息可以随时推送数据。它的核心就是“实时”。

Socket.IO

socket.io是NodeJs的一个模块，为了可以方便使用WebSocket问题。它提供服务器和浏览器之间的响应的组件，只需要一个模块就可以给应用程序加入对WebSocket的支持，并且，Socket.IO支持4种协议：WebSocket、htmlfile、xhr-polling、jsonp-polling，它会自动根据浏览器选择适合的通讯方式，也因此可以解决浏览器对WebSocket的支持问题。

总而言之，它可以很方便构建支持WebSocket的模块，把应用程序实时通信变得简单，而且几乎可以支持所有常用的浏览器实现。

它跟Ajax的区别在于，它提供的功能更多，比如很容易实时地将数据推送给客户端。并且WebSocket的一大特性就是实时连接，这是持久的过程，而Ajax则是每次都需要建立连接。

但是它们的服务目标也是不同，所以并不能说就只用socket。Ajax适合只需要时不时请求一下数据，并且可能需要缓冲的场景。

聊天室例子

通过例子来学习是最快的理解方式，这里选了一个聊天室的例子。

安装

服务器端使用socket.io:

nodejs服务器端安装：npm install socket.io
安装之后就可以require模块来使用了:

var io = require('socket.io');

客户端安装直接在页面想引用外部链js那样即可：<script src="/socket.io/socket.io.js"></script>

思路

聊天室的逻辑点其实很简单，就是进入房间，开聊，退出房间。

构建

案例参考文章socket.io+express多房间聊天应用))

这个案例很容易了解socket.io的原理，帮助我更好地理解。

原demo有些bug，比如在线用户昵称不显示（room.hbs）：

1
2
3
4
5
6
7
8
// 监听系统消息
      socket.on('sys', function (sysMsg, users) {
        var message = '<div class="sysMsg">' + sysMsg + '</div>';
        $('#msglog').append(message);

        $('#count').text(users.length);
        $('#users').text(users);
      });

原因是users打印出来其实是数组，并不能直接text显示在页面上，需要改为

1
2
3
var userArray= users.join(",");

 $('#users').text(userArray);

另外css样式是直接写在room.hbs里的，不方便拓展，所以我把它提出来, 在public里新建css文件夹，style.css。

room.hbs引用<link rel="stylesheet" href="/css/style.css">

在app.js中说明引用静态资源目录：

1
2
3
//静态资源目录

app.use(express.static('public'));

socket.io事件

socket中文手册