JavaScriptavaScript之WebSocket

最新推荐文章于 2024-01-04 10:34:29 发布

ZzzMxin

最新推荐文章于 2024-01-04 10:34:29 发布

阅读量251

点赞数

本文链接：https://blog.csdn.net/qq_34178562/article/details/92440907

版权

javascript 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

前端

8 篇文章 0 订阅

订阅专栏

JavaScript之WebSocket

场景引入

在学习web swing过程中，了解到swing客户端嵌入浏览器界面中，是通过WebSocket实现的。WebSocket是何许人也，来小小学习一番。

定义

WebSocket 是一种在单个 TCP 连接上进行全双工通讯的协议。
具有一次握手，持久连接，双向数据传输的特点。

优点

转换请求角色：ajax是主动向服务器发送请求，而websocket实现的是服务器有新消息主动返回数据到前端（场景web swing中返回的base64的图片，动态的修改canvas画布内容）。

基本使用

实例化WebSocket
var Socket = new WebSocket(url, [protocol] );
WebSocket事件

事件	事件处理程序	描述
open	Socket.onopen	连接建立时触发
message	Socket.onmessage	客户端接收服务端数据时触发
error	Socket.onerror	通信发生错误时触发
close	Socket.onclose	连接关闭时触发

WebSocket方法

方法	描述
Socket.send()	使用连接发送数据
Socket.close()	关闭连接

代码示例

<!DOCTYPE html> 
<meta charset="utf-8" /> 
<title>WebSocket Test</title> 
<script language="javascript"type="text/javascript"> 
    var wsUri ="ws://echo.websocket.org/";
     
    function init() {
        output = document.getElementById("output");
        testWebSocket();
    } 
  
    function testWebSocket() {
        websocket = new WebSocket(wsUri);

        websocket.onopen = onOpen;
        websocket.onclose = onClose;
        websocket.onmessage = onMessage;
        websocket.onerror = onError;
    } 
  
    function onOpen(evt) {
        console.log("CONNECTED");
        doSend("WebSocket rocks");
    } 
  
    function onClose(evt) {
        console.log("DISCONNECTED");
    } 
  
    function onMessage(evt) {
        console.log('RESPONSE: '+ evt.data);
    } 
  
    function onError(evt) {
        console.log('ERROR: '+ evt.data)
    } 
  
    function doSend(message) {
        console.log("SENT: " + message); 
        websocket.send(message);
    } 
  
  
    window.addEventListener("load", init, false); 
</script> 
<h2>WebSocket Test</h2> 
</html>

界面效果：
在这里插入图片描述
继续发送消息：

其他

Websocket 使用 ws 或 wss 的统一资源标志符，类似于 HTTPS，其中 wss 表示在 TLS 之上的 Websocke
头部信息

Connection 必须设置 Upgrade，表示客户端希望连接升级。
Upgrade 字段必须设置 Websocket，表示希望升级到 Websocket 协议。

ZzzMxin

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScriptavaScript之WebSocket

JavaScriptavaScript之WebSocket定义WebSocket 是一种在单个 TCP 连接上进行全双工通讯的协议。具有一次握手，持久连接，双向数据传输的特点。基本使用实例化WebSocketvar Socket = new WebSocket(url, [protocol] );WebSocket事件事件事件处理程序描述open Socket.ono...
复制链接

扫一扫