Websocket 介绍

发布时间: 更新时间: 总字数:897 阅读时间:2m 作者: IP上海 分享 网址

WebSocket 是基于 TCP 的网络协议,对应 TCP Socket,可以使用 HTTP(Web)上的 Socket 通信规范。

介绍

  • WebSocket 主要实现双向的实时通信
    • 2011 年 IETF 发布了 WebSocket(RFC 6455)
    • Web + Socket 组成
      • 使用 HTTP 协议通过 握手 过程建立连接,握手时通过 Upgrade: web-socket 头进行协议升级
      • 使用 TCP 的全双工通信协议通信
  • WebSocket 是一个轻量级的协议,兼容 TCP 和 HTTP 的优点
    • 头部小,解决带宽资源
    • 使用二进制帧传输数据
    • 支持数据压缩
    • 有状态的持久连接
    • 全双工通信,支持实时数据交换
  • 访问
    • ws:// 基于 HTTP 协议
    • wss:// 基于 HTTPs 协议
  • 一般使用
    • 客户端发送一个字符串(如 json),服务端收到后响应对应的结果,反之亦可

客户端

websocat

# 安装
wget -O websocat https://github.com/vi/websocat/releases/download/v1.9.0/websocat_linux64
chmod 755 websocat
mv websocat /usr/bin/

# 使用
websocat ws://<url>

demo

golang 实现

gorilla/websocket example ...
// Copyright 2015 The Gorilla WebSocket Authors. All rights reserved.
// Use of this source code is governed by a BSD-style
// license that can be found in the LICENSE file.

//go:build ignore
// +build ignore

package main

import (
	"flag"
	"html/template"
	"log"
	"net/http"

	"github.com/gorilla/websocket"
)

var addr = flag.String("addr", "localhost:8080", "http service address")

var upgrader = websocket.Upgrader{} // use default options

func echo(w http.ResponseWriter, r *http.Request) {
	c, err := upgrader.Upgrade(w, r, nil)
	if err != nil {
		log.Print("upgrade:", err)
		return
	}
	defer c.Close()
	for {
		mt, message, err := c.ReadMessage()
		if err != nil {
			log.Println("read:", err)
			break
		}
		log.Printf("recv: %s", message)
		err = c.WriteMessage(mt, message)
		if err != nil {
			log.Println("write:", err)
			break
		}
	}
}

func home(w http.ResponseWriter, r *http.Request) {
	homeTemplate.Execute(w, "ws://"+r.Host+"/echo")
}

func main() {
	flag.Parse()
	log.SetFlags(0)
	http.HandleFunc("/echo", echo)
	http.HandleFunc("/", home)
	log.Fatal(http.ListenAndServe(*addr, nil))
}

var homeTemplate = template.Must(template.New("").Parse(`
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
window.addEventListener("load", function(evt) {

    var output = document.getElementById("output");
    var input = document.getElementById("input");
    var ws;

    var print = function(message) {
        var d = document.createElement("div");
        d.textContent = message;
        output.appendChild(d);
        output.scroll(0, output.scrollHeight);
    };

    document.getElementById("open").onclick = function(evt) {
        if (ws) {
            return false;
        }
        ws = new WebSocket("{{.}}");
        ws.onopen = function(evt) {
            print("OPEN");
        }
        ws.onclose = function(evt) {
            print("CLOSE");
            ws = null;
        }
        ws.onmessage = function(evt) {
            print("RESPONSE: " + evt.data);
        }
        ws.onerror = function(evt) {
            print("ERROR: " + evt.data);
        }
        return false;
    };

    document.getElementById("send").onclick = function(evt) {
        if (!ws) {
            return false;
        }
        print("SEND: " + input.value);
        ws.send(input.value);
        return false;
    };

    document.getElementById("close").onclick = function(evt) {
        if (!ws) {
            return false;
        }
        ws.close();
        return false;
    };

});
</script>
</head>
<body>
<table>
<tr><td valign="top" width="50%">
<p>Click "Open" to create a connection to the server,
"Send" to send a message to the server and "Close" to close the connection.
You can change the message and send multiple times.
<p>
<form>
<button id="open">Open</button>
<button id="close">Close</button>
<p><input id="input" type="text" value="Hello world!">
<button id="send">Send</button>
</form>
</td><td valign="top" width="50%">
<div id="output" style="max-height: 70vh;overflow-y: scroll;"></div>
</td></tr></table>
</body>
</html>
`))

Socket.IO

F&Q

the client is not using the websocket protocol: ‘upgrade’ token not found in ‘Connection’ header

源码,解决方式,通过 nginx 代理,配置如下

location /ws/ {
	proxy_set_header   X-Forwarded-For $remote_addr;
	proxy_set_header   Host $http_host;
	proxy_set_header   Upgrade websocket;
	proxy_set_header   Connection Upgrade;
	proxy_pass         "http://127.0.0.1:1323";
}

websocket: unsupported version: 13 not found in ‘Sec-Websocket-Version’ header

  • 源码
  • Sec-WebSocket-Key 是 WebSocket 客户端发送的一个 base64 编码的密文,要求服务端必须返回一个对应加密的 Sec-WebSocket-Accept 应答
  • Sec-WebSocket-Version 是版本为 13,上面两个参数理论上会自己带上,也可以通过 Nginx 配置?
proxy_set_header Sec-WebSocket-Key sN9cRrP/n9NdMgdcy2VJFQ==
proxy_set_header Sec-WebSocket-Version 13

扩展

Home Archives Categories Tags Statistics
本文总阅读量 次 本站总访问量 次 本站总访客数