Fetch Request VS. WebSocket哪个更快?

Question

我在Fetch和WebSocket中发送相同的数据，但是:

• HTTP绕过200 MB需要29秒。
WebSocket需要6秒来传输200 MB。

问题为什么WebSocket比HTTP快?它与编码或技术或其他东西有关…?

获取

async function postData(url = '', data) {
const response = await fetch(url, {
method: 'POST',
mode: 'no-cors',
cache: 'no-cache',
credentials: 'same-origin',
headers: {
'Content-Type': 'application/octet-stream'
},
redirect: 'follow',
referrerPolicy: 'no-referrer',
body: data
});
return response; //.arrayBuffer();
}
postData('http://localhost:3800/buffer', arrU8)
.then(data => {
console.log(data);
});

arrU8是一个Uint8Array的长度:185578200

WebSocket

function connect() {
return new Promise(function (resolve, reject) {
var ws = new WebSocket('ws://127.0.0.1:8081/echo');
ws.onopen = function () {
resolve(ws);
};
ws.onerror = function (err) {
reject(err);
};
ws.onclose = function (evt) {
console.log("CLOSE SOCKET", new Date().toLocaleString());
};
ws.onmessage = function (evt) {
console.log("RESPONSE SOCKET: " + "RECEIVED" /* evt.data */, new Date().toLocaleString());
};
});
}
connect().then(function (ws) {
// onopen
ws.binaryType = 'arraybuffer';
ws.send(arrU8);
ws.close();
}).catch(function (err) {
// onerror
console.log("ERROR: " + evt.data, new Date().toLocaleString());
});

服务器端是由GO编写的

HTTP

func process(w http.ResponseWriter, r *http.Request) {
if r.URL.Path != "/buffer" {
http.Error(w, "404 not found.", http.StatusNotFound)
return
}
switch r.Method {
case "GET":
fmt.Fprintf(w, "GET request is received: %s n", r.URL)
case "POST":
body, err := ioutil.ReadAll(r.Body)
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
log.Println("Data length received = ", len(body))
fmt.Fprintf(w, "Data length = %v n", len(body))
default:
fmt.Fprintf(w, "Sorry, only GET and POST methods are supported.")
}
}

WebSocket

package main
import (
"flag"
"log"
"net/http"
"text/template"
"github.com/gorilla/websocket"
)
var addr = flag.String("addr", "localhost:8081", "http service address")
var upgrader = websocket.Upgrader{} // use default options
func main() {
log.Println("Launching WebSocket server...", *addr)
flag.Parse()
log.SetFlags(log.LstdFlags | log.Lmicroseconds)
http.HandleFunc("/echo", echo)
http.HandleFunc("/", home)
log.Fatal(http.ListenAndServe(*addr, nil))
}
func echo(w http.ResponseWriter, r *http.Request) {
// To fix 403 error temporarily. It's unsafe:
upgrader.CheckOrigin = func(r *http.Request) bool { return true }
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.Println("recv: message type:", mt)
log.Printf("recv: bytes count: %v", len(message))
// // // Disable echo and log
// 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")
}

Answer 1

Websocket是更快的，如果你必须发送更多的数据随着时间的推移，因为你可以保持连接到服务器打开。

使用http，每次都必须进行双向握手，并且每次要发送内容时都必须建立连接。

在你的情况下，这可能是因为http必须多次握手，因为它不能在一个会话中发送所有内容。