商家操作页面

商家页面即我们前面所讲的(shops.html)的主要功能就是在收到用户消息后，对用户消息进行反馈。当与服务端通信时我们需要引入如下代码：

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

页面完成结果如下图：

首先是要对服务器进行连接，如下代码：

var socket = io.connect();
socket.on('connect',function(){
    console.log('连接成功');
});

当收到消息时，如下代码：

socket.on('message', function (data) {
    console.log('收到消息:'+JSON.stringify(data));
    switch (data.cmd) {
      case "rec":   //收到数据进行绑定
        id=data.data.id;
        document.getElementById("receiveTxt").value = data.data.message;
        document.getElementById("addressText").value =data.data.tel;
        document.getElementById("userText").value =data.data.name;
        break;
    }
});

当要对消息进行反馈时，执行如下代码：

function sendMessage(){
   socket.send({cmd:"ok",data:{id:id,message:"接单成功！"}});
}

页面布局的html代码如下：

<h2>商家页</h2>
<div id="shop">
    <table align="center" border="1">
        <tr><td><button onclick="sendMessage()">接单</button></td><td><button onclick="cancelMessage()">取消</button></td></tr>
        <tr><td><lable>收到的内容</lable></td>
            <td><div><textarea type="text" id="receiveTxt"></textarea></div></td>
        </tr>
        <tr><td><lable>用户电话</lable></td><td><input type="text" id="addressText"></td></tr>
        <tr><td><lable>收到的用户</lable></td><td><input type="text" id="userText"></td></tr>
    </table>
</div>