创建一个 HTML 文件,内容为:
<!DOCTYPE html>
<html>
<header>
<script>
var ws = new WebSocket("ws://echo.websocket.org");
ws.onopen = function() {
ws.send("Test!");
};
ws.onmessage = function(ev) {
console.log(ev.data);
ws.close();
};
ws.onclose = function(ev) {
console.log("WebSocketClosed!");
};
ws.onerror = function(ev) {
console.log("WebSocketError!");
};
</script>
</header>
<body>
<p>The Simplest Websocket Example</p>
</body>
</html>
在浏览器里打开这个文件,结果如下:
解释如下:
脚本开始时创建一个WebSocket对象,参数是需要连接的服务器端的地址,同 http 协议使用 http:// 开头一样,WebSocket 协议的 URL 使用 ws:// 开头,另外安全的 WebSocket 协议使用 wss:// 开头。
当调用 new WebSocket(url) 接口时,浏览器就开始了与地址为 url 的 WebServer 建立握手连接的过程。
随后是 WebSocket 对象注册消息的处理函数,WebSocket对象一共支持四个消息
- onopen
- onmessage
- onclose
- onerror
当浏览器和 WebSocket 服务器连接成功后,会触发 onopen 消息;
如果连接失败,发送、接收数据 失败或者处理数据出现错误,浏览器会触发onerror消息;
当浏览器接收到 WebSocket 服务器发送过来的数据时,就会触发 onmessage消息,参数 ev 中包含服务器传输过来的数据;
当浏览器接收到 WebSocket 服务器端发送的关闭连接请求时, 就会触发 onclose 消息。