WebSocket是为解决客户端与服务端实时通信而产生的技术。
介绍它是什么的废话不多说了,直接说怎么用:
客户端:
1.创建一个 EventSource 对象
var es = new EventSource(url)
其中,url参数是必填的,传入需要建立通信的后台文件地址
2.指定事件回调
EventSource的实例可以指定以下三个事件回调:
(1).onopen: 连接建立成功
es.onopen=function(e){
//连接建立成功后执行的内容
}
(2).onmessage: 接收到数据
es.onmessage=function(e){
//接收到数据后执行的内容.e.data就是接收到的数据
console.log(e.data)
}
(3).onerror: 连接失败
es.onopen=function(e){
//连接建立失败执行的内容
}
服务器端:
设置响应头: Content-Type:text/event-stream
下面举个简单的栗子,服务器端每秒发送当前的时间到客户端:
index.html:
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript" src="script.js"></script> </head> <body> <div id="zt"></div> <h3>当前时间:</h3> <div id="date"></div> </body> </html>
<div id="zt"></div>用来存放连接状态
<div id="date"></div>用来存放当前时间
script.js:
(function(){
var status,date;
var serverUrl = ‘socket.php‘;
window.onload = function(){
status = document.getElementById(‘zt‘);
date = document.getElementById(‘date‘);
connect();
};
function connect() {
status.innerHTML = ‘正在创立连接‘;
var es = new EventSource(serverUrl);
es.onopen = openCallback;
es.onerror = errorCallback;
es.onmessage = messageCallback;
}
function openCallback(e) {
status.innerHTML = ‘已连接‘
}
function errorCallback(e) {
status.innerHTML = ‘连接错误‘
}
function messageCallback(e) {
date.innerHTML = e.data
}
})();
说明:
创建一个EventSource对象,传入socket.php作为参数.socket.php就是建立通信的后台文件.
分别执行onopen回调,onmessage回调,onerror回调,将对应的连接状态和接收到的数据显示在页面中.
socket.php:
<?php
header(‘Content-Type:text/event-stream‘);
for($i = 0; $i<10; $i++) {
date_default_timezone_set("Asia/Shanghai");
echo ‘data:‘.date(‘Y-m-d H-i-s‘);
echo "\n\n";
@ob_flush();@flush();
sleep(1);
}
?>
设置响应头Content-Type为text/event-stream
每隔一秒发送一次当前时间.
这样就创建了一个最简单的websocket应用.
源码地址: https://github.com/OOP-Code-Bunny/html5/tree/master/websocket
时间： 2024-11-05 18:38:09