HTML WebSocket

简介

  • WebSocket 是 HTML5 提供的全双工通讯的协议;
  • 浏览器和服务器只需要做一个握手的动作,两者之间就可以通过 TCP 连接直接交换数据;
  • 与 HTTP 协议有着良好的兼容性。默认端口也是80和443;
  • 可以发送文本,也可以发送二进制数据,开销小,通信高效;
  • 没有同源限制,可以与任意服务端通信;
  • 协议标识符是 ws,加密是 wss。

原理简述

1、客户端发起带有附加头信息”Upgrade: WebSocket” 协议升级的 HTTP 请求;
2、服务端产生应答信息返回给客户端并建立连接;
3、通过连接通道全双工传递信息;
4、客户端或者服务器端的某一方主动的关闭连接,传输结束;

兼容性

所有主流浏览器均支持。
Javascript 代码

<script>
function ifSupportWS(){
	var hasWS = "WebSocket" in window;
	var message = hasWS ? "supports" : "doesn't supports"
    alert("Your browser " + message + " WebSocket!");
}
</script>

效果:

创建 Websocket 对象

通过下面方法创建,其中 protocol 参数是可以选的;

var ws = new WebSocket(url, protocol);

例如:
var ws = new WebSocket(“ws://123.207.167.163/ajaxchattest”,”9010″);
或者这样写
var ws = new WebSocket(“ws://123.207.167.163:9010/ajaxchattest”);

WebSocket 属性

属性 说明
readyState 用数字表示连接状态:0 = 连接未建立,1 = 连接已建立,可进行通信;2 = 连接正在关闭;3 = 连接已关闭或不能打开;
bufferedAmount 表示还有多少字节二进制数据没有发送出去

readyState 常量对照

常量 取值状态
WebSocket.CONNECTING 0
WebSocket.OPEN 1
WebSocket.CLOSING 2
WebSocket.CLOSED 3

WebSocket 事件

事件 说明
onopen 建立连接时触发
onmessage 客户端接收数据时触发
onerror 通信发生错误时触发
onclose 连接关闭时触发

WebSocket 方法

方法 说明
send(data) 发送数据
close(code, reason) 关闭连接,code 表示关闭连接的状态号,默认的取值是1000(表示正常连接关闭),reason 也是可选一个可读的字符串,表示连接被关闭的原因。这个字符串必须是不长于123字节的 UTF-8 文本(不是字符)。

WebSocket 实例

配置 WebSocket 服务端
暂时提供的一个网上现有的服务供测试,有时间会自行开发一个
wss://echo.websocket.org

客户端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Web Socket</title>
    <style type="text/css">
        .flex-container {
            display: -webkit-flex;
            display: flex;
            width: 100%;
        }
    </style>
    <script type="text/javascript">
        var wssURL = "wss://echo.websocket.org"
        var ws;
        function support() {
            return "WebSocket" in window;
        }
        function connect() {
            if(support()){
                ws = new WebSocket(wssURL);
                ws.onopen = function () {
                    document.getElementById("result").innerHTML = "Websocket 已经连接..";
                };
                return true;
            }else{
                alert("您的浏览器不支持 WebSocket!");
            }
        }
        function disconnect() {
            if(ws !== undefined){
                ws.onclose = function () {
                    document.getElementById("result").innerHTML +=  "\nWebsocket 已关闭";
                };
                //ws.close();
                ws.close(1000,"close normally")
            }
        }
        function send(binary) {
            var msg = document.getElementById("message").value;
            if(msg === ""){
                alert("请输入发送信息");
                return;
            }
            if(ws !== undefined) {
               if(ws.readyState === WebSocket.CLOSED){
                   alert("请先连接 WebSocket 服务");
                   return;
               }
                ws.onmessage = function (evt) {
                        var received_msg = evt.data;
                        document.getElementById("result").innerHTML += "\r服务器返回你的数据:" + received_msg
                    };
                //var binaryMsg = new binary(msg);
                ws.send(msg);
            }
            else{
                alert("请先连接 WebSocket 服务");
            }
        }
    </script>
</head>
<body>
<div class="flex-container">
    <input type="button" value="连接" onclick="connect()"/>
    <input type="button" value="断开" onclick="disconnect()"/>
</div>
<textarea style="width: 400px;height: 200px;" id="result" readonly="true"></textarea>
<div class="flex-container">
    <input type="text" id="message" />
    <input type="button" value="发消息" onclick="send(false)"/>
</div>
</body>
</html>

效果:

留下评论

电子邮件地址不会被公开。 必填项已用*标注