您现在的位置是: 网站首页> 前端技术> HTML HTML
HTML5 WebSocket 使用详解以及使用示例
Smile
2021-04-28 19:33:39
PHP
HTML
Javascript
阅读:2176
简介现在,很多网站为了实现推送技术,所用的技术都是 Ajax 轮询,这样需要不断的向服务器发送请求,非常浪费带宽资源和消耗服务器的性能,HTML5 定义的 WebSocket 协议,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯。
1、前端代码使用示例
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 WebSocket 使用详解以及使用示例</title>
</head>
<body>
<div>
<button onclick="WebSocketTest();">运行 WebSocket</button>
</div>
</body>
<script type="text/javascript">
function WebSocketTest() {
if ("WebSocket" in window){
alert("您的浏览器支持 WebSocket!");
// 实例化一个 websocket
var ws = new WebSocket("ws://localhost:9000");
//发送数据
ws.onopen = function(evt){
ws.send("发送数据");
console.log("数据发送中...");
};
//接收数据
ws.onmessage = function (evt) {
var received_msg = evt.data;
console.log("数据已接收...");
};
// 关闭 websocket
ws.onclose = function(evt) {
console.log("连接已关闭...");
};
//连接错误
ws.onerror = function(evt, e) {
console.log('error:' + e);
};
}else{
// 浏览器不支持 WebSocket
console.log("您的浏览器不支持 WebSocket!");
}
}
</script>
</html>
WebSocket 属性
(1) Socket.readyState
0 - 表示连接尚未建立
1 - 表示连接已建立,可以进行通信
2 - 表示连接正在进行关闭
3 - 表示连接已经关闭或者连接不能打开
(2) Socket.bufferedAmount
只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输,但是还没有发出的 UTF-8 文本字节数
WebSocket 事件
0 - Socket.onopen:连接建立时触发
1 - Socket.onmessage:客户端接收服务端数据时触发
2 - Socket.onerror:通信发生错误时触发
3 - Socket.onclose:连接关闭时触发
WebSocket 方法
0 - Socket.send():使用连接发送数据
1 - Socket.close():关闭连接
2、服务端代码,这里使用了 PHP 的Swoole扩展编写一个简单的websocket示例
<?php
$server = new Swoole\Websocket\Server('127.0.0.1', 8811);
$server->on('open', function ($server, $req) {
echo "connection open: {$req->fd}\n";
});
$server->on('message', function ($server, $frame) {
echo "received message: {$frame->data}\n";
$server->push($frame->fd, json_encode(['hello', 'world']));
});
$server->on('close', function ($server, $fd) {
echo "connection close: {$fd}\n";
});
$server->start();
很赞哦! (1)