一，协议的开发

目前为止我们分别实现了Cocos Creator和Web端，现在是时候实现通信了，首先我们来开发后端代码，目前这步是实现一个广播消息，一个用户发出的信息所有的用户都可以收到，协议名称定义为“broadcast”，在后端文件router.js中加入协议的处理：

// 发送消息接口，将一条消息发送给所有的用户
socketHander.broadcast = function(data, conn) {
    var msg = data['msg'];
    var id = data['userId'];

    var allConn = userConnMgr.getAllConn();
    var content = {
        'opr' : 'getMsg',
        'data' : {
            'src' : id,
            'msg' : msg
        }
    }
    content = JSON.stringify(content);
    allConn.forEach(function(ele, index) {
        ele.sendText(content);
    })

    var resdata = {
        'opr':data['opr'],
        'data' : {
            'error': 0
        }
    }
    conn.sendText(JSON.stringify(resdata));
}

这个函数需要从用户链接管理中获取所有的用户链接，在userConnMgr.js中实现函数getAllConn：

userConnMgr.getAllConn = function() {
    var res = [];
    for(var key in UIDtoConnMap) {
        res.push(UIDtoConnMap[key]);
    }
    
    return res;
}

getAllConn是一个很简单的函数，把所有用户的连接放到一个数组中，然后返回给调用者，调用者*broadcast在获取到链接后依次调用给用户发送信息。

二，扩展WEB端

在WEB端，我们需要扩展下WEB端UI
2.1,添加输入发送内容的UI

    <!-- 发送信息框 -->
    <form>
        输入内容：
        <br />
        <input type="text" name="inputArea" id="inputArea">
        <br />
        <input type="button" id="buttonSend" onclick="sendMsg()" value="buttonSend" />
    </form>

2.2添加展示获取到的消息的标签

<!-- 收到的信息展示去 -->
    <br />
    <label>消息来源：</label>
    <label id="getMsgSrc">还没有消息</label>
    <br />
    <label>消息内容：</label>
    <label id="getMsgContent">还在等着消息呢</label>

2.3 实现发送消息的功能sendMsg

function sendMsg() {
            var msg = document.getElementById('inputArea').value;
            alert('要发送的消息:' + msg);

            var data = {
                'opr' : 'broadcast',
                'data' : {
                    'userId' : userInfo.id,
                    'token' : userInfo.token,
                    'msg' : msg
                }
            };

            ws.send(JSON.stringify(data));
        }

2.4 解析展示消息

ws.onmessage = function(info) {
    console.log('onmessage info = ' + info.data);
    var response = JSON.parse(info.data);
    if(response.opr == 'getMsg') {
        // 发送消息进行通信
        onGetMsg(response);
    }
}

function onGetMsg(msg) {
    document.getElementById('getMsgSrc').innerText = msg['data']['src'];
    document.getElementById('getMsgContent').innerText = msg['data']['msg'];
}

至此，我们完成了web端的发送展示消息。