websocket入门（1）——初识socket.io

快来打我* 2022-06-13 05:11 232阅读 0赞

## socket.io简述 ##

### 1、基本介绍 ###

socket.io是基于websocket技术，实现实时通信功能的技术。

简单来说，通过websocket技术，客户端可以和服务器端进行双向实时通信，从而可以实现很多高级特性。

这里附一个阮一峰的关于[WebSocket 教程][WebSocket]，以供深入理解。

而socket.io是以websocket技术为主，为了兼容性还带多个降级支持办法，包括：

Flash Socket
    
    AJAX long-polling
    
    AJAX multipart Stream
    
    Forever IFrame
    
    JSONP polling

他会根据浏览器的支持程度，自动选择通过哪种技术来实现通信。

另附一个[socket.io的详细工作流程][socket.io]的知乎回答，个人觉得讲得很好。

### 2、环境 ###

socket.io封装了前端和后端的全部内容，他是一个跨平台的库。

包括前端的socket.io的js库，以及后端基于Node.js的模块。

简单来说：

1.  前端引入socket.io的js文件即可；
2.  后端通过npm安装socket.io，然后引入并使用即可；

### 3、前端 ###

[socket.io官网][socket.io 1]下载即可，或者直接引入通过CDN加速过的文件。

最简单的前端示例DEMO可以看我的示例demo  
[https://github.com/qq20004604/Backgammon-websocket/blob/master/public/base.html][https_github.com_qq20004604_Backgammon-websocket_blob_master_public_base.html]

需要结合后端使用（请看4）

### 4、后端 ###

我姑且认为你有Node.js和npm。

通过npm安装socket.io

npm install --save socket.io

然后通过require引入socket.io的初始化函数，并使用这个函数初始化http服务器实例。

这里假定你使用express框架（因为这个最简单方便），如以下代码：

// 引入需要的模块：http和express
    var http = require('http');
    var express = require('express');
    var path = require('path');
    var app = express();
    //设置public为静态目录
    app.use(express.static(path.join(__dirname, 'public')));
    app.set('port', '80');
    var server = http.createServer(app);
    //启动服务器
    server.listen(80);
    
    //以上服务器创建完毕，这个时候可以引入socket.io了
    //创建socket
    var io = require('socket.io')(server);

初始化之后，会返回一个对象io;

用这个对象去监听connection事件，然后在回调函数里传的参数，就是每一个用户的websocket实例;

可以用这个实例对该用户发送信息，或者监听用户发出的信息等。

//添加连接监听
    io.on('connection', function (socket) { 
        console.log("Clent has connectioned");
        var number = 0;
        //连接成功则执行下面的监听
        socket.on('message', function (event) { 
            console.log('Received message from client!', event);
            number++;
            socket.emit("receiveMessage", new Date() + "：客户端第" + number + "次发送信息");
        });
        //断开连接callback
        socket.on('disconnect', function () { 
            console.log('Clent has disconnected');
        });
    });

可以见我写的最简单的示例DEMO：[baseApp.js][]

down下来之后使用 `node baseApp.js` 来运行。（记得要先 `npm install` 安装依赖）

基本页面是 `http://localhost/base.html`

我的github示例DEMO（包括最简单的示例DEMO以及一个网络对战版五子棋）

[https://github.com/qq20004604/Backgammon-websocket][https_github.com_qq20004604_Backgammon-websocket]

[WebSocket]: http://www.ruanyifeng.com/blog/2017/05/websocket.html
[socket.io]: https://www.zhihu.com/question/31965911
[socket.io 1]: https://socket.io/
[https_github.com_qq20004604_Backgammon-websocket_blob_master_public_base.html]: https://github.com/qq20004604/Backgammon-websocket/blob/master/public/base.html
[baseApp.js]: https://github.com/qq20004604/Backgammon-websocket/blob/master/baseApp.js
[https_github.com_qq20004604_Backgammon-websocket]: https://github.com/qq20004604/Backgammon-websocket