用户操作页面

用户操作页面(list.html)实现的功能就是展示所有商家的信息与服务内容。当用户选择商家时，向商家发送信息。在与服务端通信时要引用如下代码：

<script src="/socket.io/socket.io.js"></script>

页面的效果图如下图：

首先要与服务器连接，当连接成功时，发送一些信息给服务端，当收到服务端息消息时，绑定数据或者展示在页面上。

如下用户页面的js代码的功能就是连接服务器，并通知服务器该用户上线了。

var services={};
var params = getCookie(); //获取cookie中的参数
socket.on('connect',function(){
        console.log('连接成功');
        socket.send({cmd:"online",data:""});
});

获取cookie的方法如下：

function getCookie(){
    var result = {};
    var arr = document.cookie.split(";");
    arr.map(function(a){
        var cache = a.split('=');
        result[cache[0].trim()] = cache[1].trim();
    });
    return result;
}

当连接成功后，用户收到消息时，执行以下代码：

socket.on('message', function (data) {
        console.log('收到消息:'+JSON.stringify(data));
        switch (data.cmd) {
            case "rec": //收到消息在页面展示
                document.getElementById("receiveTxt").value = data.data;
                break;
            case "list":  //收到所有在线商家的消息， 然后把数据在页面进行绑定
                    console.log(data.data);
                var options = document.getElementById("selectPerson");
                document.getElementById("selectPerson").options.length=0;
                    for(var i in data.data)   {
                        var opp = new Option(data.data[i],i );
                        options.add(opp);
                    }
                    var id = document.getElementById("selectPerson").value;
                    document.getElementById("shopText").value=services[id];
                break;
            case "online": //收到刚上线的商户通知，对页面进行数据添加
                console.log(data);
                var options = document.getElementById("selectPerson");
                var opp = new Option(data.data.name,data.data.id );
                options.add(opp);
                services[data.data.id]=data.data.service;
                break;
            case "ok":
                document.getElementById("receiveTxt").value = data.data;
                break;
       }
});

以上我们收到了四个消息，分别为rec、online、list、ok，它们分别对应服务端的四个命令字相同的发送命令。即当我们收到online命令时，我们在用户页面进行商家信息添加；当收到list命令时，我们重新将商家用户进行展示。收到rec与ok命令时，在页面展示相关信息。后面的商家用户也是一样的。

当要选择商家时，将选择的服务与自己的信息发送给商家。

function sendMessage(){
      var data=document.getElementById("sendTxt").value;
      var id = document.getElementById("selectPerson").value; // 选中值
      socket.send({cmd:"chat",data:{id:id,message:data,tel:params.tel,name:params.name_u}});
}

当我们发送chat命令时，服务端也有一个接收命令，来处理收到的数据。

列表改变事件如下：

function selectChange(){
    var id = document.getElementById("selectPerson").value;
    document.getElementById("shopText").value=services[id] ;
}

页面的html布局代码如下：

<h2>用户页</h2>
<div id="allUsers">
<table align="center" border="1"><tr><td>商户列表</td><td><select id="selectPerson"  onchange="selectChange()"></select></td></tr>
    <tr><td><lable>商家服务</lable></td><td><input type="text" id="shopText"></td></tr>
    <tr><td><lable>发送内容</lable></td><td><input type="text" id="sendTxt"></td></tr>
    <tr><td><button onclick="sendMessage()">点单</button></td><td></td></tr>
    <tr><td><lable>收到的内容</lable></td>
        <td><div>
                <textarea type="text" id="receiveTxt"></textarea>
            </div>
        </td>
    </tr>
</table>
</div>