了解一下websocket

最新推荐文章于 2024-04-02 10:16:39 发布

墨墨博客

最新推荐文章于 2024-04-02 10:16:39 发布

阅读量252

点赞数

CC 4.0 BY-SA版权

分类专栏： html5 websocket 文章标签： websocket http socket 网络协议

本文链接：https://blog.csdn.net/wangweiscsdn/article/details/113483864

html5 同时被 2 个专栏收录

30 篇文章

订阅专栏

websocket

1 篇文章

订阅专栏

Websocket 是什么？

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。跟http一样是一种协议

跟SOCKET、HTTP有什么区别呢？

Http

HTTP是单向的，客户端发送请求，服务器发送响应。举例来说，当客户端向服务器发送请求时，该请求以HTTP或HTTPS的形式发送，在接收到请求后，服务器会将响应发送给客户端。每个请求都与一个对应的响应相关联，在发送响应后客户端与服务器的连接会被关闭。每个HTTP或HTTPS请求每次都会新建与服务器的连接，并且在获得响应后，连接将自行终止。 HTTP是在TCP之上运行的无状态协议，TCP是一种面向连接的协议，它使用三向握手方法保证数据包传输的传递并重新传输丢失的数据包。

Websocket

WebSocket是双向的，在客户端-服务器通信的场景中使用的全双工协议，与HTTP不同，它以ws://或wss://开头。它是一个有状态协议，这意味着客户端和服务器之间的连接将保持活动状态，直到被任何一方（客户端或服务器）终止。在通过客户端和服务器中的任何一方关闭连接之后，连接将从两端终止。

Socket

Socket是对TCP/IP协议的封装，Socket本身并不是协议，而是一个调用接口（API），通过Socket，我们才能使用TCP/IP协议。

举个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
</html>
<script>
  var ws = new WebSocket('ws://localhost:3000/websocket'); //申请一个WebSocket对象，参数是服务端地址，同http协议使用http://开头一样，WebSocket协议的url使用ws://开头，另外安全的WebSocket协议使用wss://开头
  ws.onopen = function() {　　//当WebSocket创建成功时，触发onopen事件
    console.log('open');
    ws.send(JSON.stringify({
      'msg': 'connect',
      'version': '1',
      'support': ['1']
    }));
    ws.send(JSON.stringify({
    id: "d2c241b3-6e15-45c7-bc88-927bb6daa0a5",
    method: "login",
    msg: "method",
    params: [{user: {username: "test1"},password: {digest: "8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92", algorithm: "sha-256"}}]
    })); //将消息发送到服务端
    ws.send(JSON.stringify({
      "msg": "sub",
      "id": "tKKsgLdXa6wEAQszv",
      "name": "stream-room-messages",
      "params":[
        "4pXBvSmWpkP9XG4zZDpcRwjM68r5A89uM4",
        false
      ]
    })); //将消息发送到服务端
  };
  ws.onmessage = function(e) {　　//当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据　　
    console.log(e.data);
    if(JSON.parse(e.data).msg==='ping'){ // 这个是心跳重连机制，服务端发来ping的时候，客户端要回复pong,这样连接不会断
      ws.send(JSON.stringify({
        'msg': 'pong'
      }));
    }
  };
  ws.onclose = function(e) {　　//当客户端收到服务端发送的关闭连接请求时，触发onclose事件　
    console.log('close');
  };
  ws.onerror = function(e) {　　//如果出现连接、处理、接收、发送数据失败的时候触发onerror事件　　
    console.log(error);
  };
</script>