WebSocket 客户端代码
2018-1-8 dingshangchao JavaScript
网页代码必须执行以下操作：
1. 初始化 websocket 并连接到服务器。
2. 测试以查看它是否成功。
3. 发送和接收数据。
示例代码：
var host = "ws://sample-host/echo";
try {
socket = new WebSocket(host);
socket.onopen = function (openEvent) {
document.getElementById("serverStatus").innerHTML =
'WebSocket Status:: Socket Open';
};
socket.onmessage = function (messageEvent) {
if (messageEvent.data instanceof Blob) {
var destinationCanvas = document.getElementById('destination');
var destinationContext = destinationCanvas.getContext('2d');
var image = new Image();
image.onload = function () {
destinationContext.clearRect(0, 0,
destinationCanvas.width, destinationCanvas.height);
destinationContext.drawImage(image, 0, 0);
}
image.src = URL.createObjectURL(messageEvent.data);
} else {
document.getElementById("serverResponse").innerHTML =
'Server Reply:: ' + messageEvent.data;
}
};
socket.onerror = function (errorEvent) {
document.getElementById("serverStatus").innerHTML =
'WebSocket Status:: Error was reported';
};
socket.onclose = function (closeEvent) {
document.getElementById("serverStatus").innerHTML =
'WebSocket Status:: Socket Closed';
};
}
catch (exception) { if (window.console) console.log(exception); }
}
function sendTextMessage() {
if (socket.readyState != WebSocket.OPEN) return;
var e = document.getElementById("textmessage");
socket.send(e.value);
}
function sendBinaryMessage() {
if (socket.readyState != WebSocket.OPEN) return;
var sourceCanvas = document.getElementById('source');
socket.send(sourceCanvas.msToBlob());
}
WebSocket 提供一组可用于 WebSocket 编程的对象、方法和属性。
| 名称 | 类型 | 描述 |
|---|---|---|
| WebSocket | 对象 | 提供到远程主机的双向通道。 |
| close | 方法 | 关闭 websocket。 |
| send | 方法 | 使用 websocket 发送数据到服务器。 |
| binaryType | 属性 | 由 onmessage 接收的二进制数据格式。 |
| bufferedAmount | 属性 | 使用 send 的已排队的数据字节数。 |
| extensions | 属性 | 报告服务器所选中的扩展名。 |
| onclose | 属性 | 当套接字关闭时调用的事件处理程序。 |
| onerror | 属性 | 当出现错误时调用的事件处理程序。 |
| onmessage | 属性 | 通知接收到消息的事件处理程序。 |
| onopen | 属性 | 当 websocket 已连接时调用的事件处理程序。 |
| protocol | 属性 | 报告服务器所选中的协议。 |
| readyState | 属性 | 报告 websocket 连接的状态。 |
| url | 属性 | 报告套接字的当前 URL。 |
标签: javascript