WebSocket学习案例

<!DOCTYPE html>  
<html lang="cn">  
<head>  
    <title>WebSocket chart application</title>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1">  
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.css">  
    <link rel="stylesheet" href="http://cdn.bootcss.com/tether/1.3.2/css/tether.css"/>  
    <script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.js" ></script>  
    <script src="http://cdn.bootcss.com/tether/1.3.2/js/tether.js"></script>  
    <script src="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.js"></script>  
    <script>  
        var ws= new WebSocket('ws://localhost:9998/echo');  
        var nickname;  
        ws.onopen = function(e){  
            console.log('Connection to server opened');  
        }  
        function appendLog(type,nickname, message,clientcount) {  
                var messages = document.getElementById('messages');  
                var messageElem = document.createElement("li");  
                var preface_label;  
            if(type==='notification') {  
                        preface_label = "<span class=\"label label-info\">*</span>";  
                    } else if(type==='nick_update') {  
                        preface_label = "<span class=\"label label-warning\">*</span>";  
                    } else {  
                        preface_label = "<span class=\"label label-success\">" + nickname + "</span>";  
                    }  
                var message_text = "<h2>" + preface_label + "  " + message + "</h2>";  
                messageElem.innerHTML = message_text;  
                messages.appendChild(messageElem);  
            var count_people = document.getElementById("count_people");  
                        count_people.innerHTML = clientcount;  
  
            }  
        ws.onmessage = function(e){  
            var data = JSON.parse(e.data);  
            nickname = data.nickname;  
                appendLog(data.type,data.nickname, data.message,data.clientcount);  
                console.log("ID: [%s] = %s", data.id, data.message);  
  
  
        }  
        function sendMessage(){  
            var message = $('#message').val().trim();  
            if(message.length<1){  
                alert("不能发送空内容！");  
                return;  
            }  
            ws.send($('#message').val());  
            $('#message').val("");  
            $('#message').focus();  
            console.log(ws.bufferedAmount);  
        }  
    </script>  
</head>  
<body lang="cn">  
    <div class="vertical-center">  
    <div class="container">  
        <h2>多人在线聊天DEMO</h2>  
    <hr />  
    <p>当前在线人数：<span id="count_people">0</span></p>  
    <ul id="messages" class="list-unstyled">  
  
        </ul>  
        <hr />  
    <form role="form" id="chat_form" onsubmit="sendMessage(); return false;">  
            <div class="form-group">  
                <input class="form-control" type="text" name="message" id="message"  
                    placeholder="输入聊天内容" value="" autofocus/>  
            </div>  
            <button type="button" id="send" class="btn btn-primary"  
          onclick="sendMessage();">发送!</button>  
    </form>  
    </div>  
    </div>  
</body>  
</html>

javascript 部分，连接websocket成功之后，主要是监听数据返回，和发送数据。
当用户编辑好内容，点击发送按钮是调用sendMessage方法，发送数据，如果需要修改昵称，则发送数据格式为"/nick 昵称"。
当服务器返回数据到客户端，我们通过appendLog方法对数据做处理，根据type字段，判断是显示用户离线在线信息，还是显示聊天信息。最后更新在线人数。

// 初始化一个 WebSocket 对象
var ws = new WebSocket('ws://localhost:9998/echo');

// 建立 web socket 连接成功触发事件
ws.onopen = function() {
  // 使用 send() 方法发送数据
  ws.send('发送数据');
  alert('数据发送中...');
};

// 接收服务端数据时触发事件
ws.onmessage = function(evt) {
  var received_msg = evt.data;
  alert('数据已接收...');
};

// 断开 web socket 连接成功触发事件
ws.onclose = function() {
  alert('连接已关闭...');
};

猜你喜欢