soket-io的常用接口

webdoket是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。

此文介绍一些 soket.io 的基本使用。
主页：https://socket.io/

1. node + express + soket.io系统搭建

服务器端：
安装：npm install --save socket.io

将soket服务绑到 server 上；

// www文件
var io = require('../routes/websoket.js');
io.attach(server);

//独立的websoket文件
var io = require('socket.io')();
var request = require('request');
io.on('connection', function(socket) {
    console.log('a user connected');
    socket.emit('msg', { msg: '我是智能闲聊高手，放马过来吧!' });
    socket.on('msg', function(obj) {
        // 接入图灵机器人,此处用图灵机器人实现了一个对话功能。
        request({
            url: 'http://www.tuling123.com/openapi/api',
            method: "POST",
            json: true,
            form: {
                'key': '1a6e7a453c1645ee8739f592ef05465e',
                'info': obj.msg,
                'userid': 'naliomg'
            }
        }, function(err, resp, body) {
            if (err) {
                console.log(err);
                return;
            }
            if (body.code == 100000) {
                socket.emit('msg', {msg: body.text});
            }else if(body.code == 200000) {
                socket.emit('msg', {msg: body.text+'，<a href="'+body.url+'">点这里</a>'});
            }
        });
    });
});
module.exports = io;

客户端：
客户端需要引入soket.io的js文件，
cdn: https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1.0" />
    <title>websoket</title>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
        }
        .clearfix{
            zoom: 1;
        }
        .clearfix:after{
            content: '';
            display:block;
            width: 0;
            height: 0;
            font-size: 0;
            visibility: hidden;
            clear: both;
        }
        .pull-l{
            float: left;
        }
        .pull-r{
            float: right;
        }
        .container{
            padding: 10px;
            margin: 0 auto;
            box-sizing: border-box;
        }
        .msg-wrap{
            width: 300px;
            height: 400px;
            margin: 10px auto;
            border: 3px solid #ddd;
            overflow: auto;
        }
        .controll-btn{
            width: 300px
        }
        #sendMsg{
            width: 220px;
            height: 40px;
            color: #aaa;
            box-sizing: border-box;
        }
        #send{
            height: 40px;
        }
    </style>
    <script type="text/javascript" src="/utils/jquery/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
</head>
<body>
    <div class="msg-wrap container" id="log"></div>
    <div class="controll-btn container clearfix">
        <input id="sendMsg" class="pull-l" type="text" placeholder="请输入内容"></input>
        <input id="send" class="pull-r" type="button" value="发送"></input>
    </div>
    <script>
        $(function(){
            var socket = io('http://naliomg.site');
            socket.on('msg', function(resp){
                $('#log').append('<p class="clearfix"><span class="pull-l">'+resp.msg+'</span></p>');
                $('#log').scrollTop( $('#log')[0].scrollHeight );
            });
            $('#send').on('click', function(){
                var msg = $('#sendMsg').val();
                if (msg.trim()=='') {
                    alert('消息不能为空~');
                    return;
                }
                socket.emit('msg', {msg: msg});
                $('#log').append('<p class="clearfix"><span class="pull-r">'+msg+'</span></p>');
                $('#sendMsg').val('');
                $('#log').scrollTop( $('#log')[0].scrollHeight );
            });
            $('#otherConnect').on('click', function(){
                var nameSoket = io('/test');
            });
        })
    </script>
</body>
</html>

2. 服务器端常用API

//监听客户端连接,回调函数会传递本次连接的socket
io.on('connection',function(socket){ 
    //监听客户端发送的信息
    socket.on('event',function(data){});
    //给该socket的客户端发送消息
    socket.emit('event', data);
    //给除了自己以外的客户端广播消息
    socket.broadcast.emit("msg",{data:"hello,everyone"}); 
    //分组
    socket.on('group1', function (data) {
        socket.join('group1');
    });
    socket.on('group2',function(data){
        socket.join('group2');
    });
    //一个客户端可以存在多个分组（订阅模式）
    socket.emit('group1'); //就可以加入group1分组；
    socket.emit('group2'); //就可以加入group2分组；
    socket.leave(data.room); //退出分组
    //对分组中的用户发送信息，不包括自己
    socket.broadcast.to('group1').emit('event_name', data); 
});    
//给所有客户端广播消息
io.sockets.emit('event',data); 
//给指定的客户端发送消息
io.sockets.socket(socketid).emit('event', data);
//对分组中的用户发送信息，不包括自己
io.sockets.in('group1').emit('event_name', data);
//获取连接的客户端socket
io.sockets.clients().forEach(function (socket) {
    //.....
});
//获取分组信息
//获取所有房间（分组）信息
io.sockets.manager.rooms;
//来获取此socketid进入的房间信息
io.sockets.manager.roomClients[socket.id];
//获取particular room中的客户端，返回所有在此房间的socket实例
io.sockets.clients('particular room');
//另一种分组方式
io.of('/some').on('connection', function (socket) {
    socket.on('test', function (data) {
        socket.broadcast.emit('event_name',{});
    });
});

3. 客户端常用API

//建立一个socket连接
var socket = io("ws://103.31.201.154:5555");
//监听服务消息
socket.on('msg',function(data){
    socket.emit('msg', {rp:"fine,thank you"}); //向服务器发送消息
    console.log(data);
});
//监听socket断开与重连。
socket.on('disconnect', function() {
    console.log("与服务其断开");
});
socket.on('reconnect', function() {
    console.log("重新连接到服务器");
});

客户端socket.on()监听的事件：
connect：连接成功
connecting：正在连接
disconnect：断开连接
connect_failed：连接失败
error：错误发生，并且无法被其他事件类型所处理
message：同服务器端message事件
anything：同服务器端anything事件
reconnect_failed：重连失败
reconnect：成功重连
reconnecting：正在重连

当第一次连接时，事件触发顺序为：connecting->connect；当失去连接时，事件触发顺序 为：disconnect->reconnecting（可能进行多 次）->connecting->reconnect->connect。

THE END!