HTML5 WebSocket

var Socket = new WebSocket(url, [protocol] );

 // 打开一个 web socket
var ws = new WebSocket("ws://localhost:9998/echo");

ws.onopen = function(){
    // Web Socket 已连接上，使用 send() 方法发送数据
    ws.send("发送数据");
};

ws.onmessage = function (evt) { 
    var received_msg = evt.data;
    alert("数据已接收...");
};

ws.onclose = function(){ 
    // 关闭 websocket
    alert("连接已关闭..."); 
};

ws.onmessage = function(event){
  if(typeof event.data === String) {
    console.log("Received data string");
  }

  if(event.data instanceof ArrayBuffer){
    var buffer = event.data;
    console.log("Received arraybuffer");
  }
}

// 收到的是 blob 数据
ws.binaryType = "blob";
ws.onmessage = function(e) {
  console.log(e.data.size);
};

// 收到的是 ArrayBuffer 数据
ws.binaryType = "arraybuffer";
ws.onmessage = function(e) {
  console.log(e.data.byteLength);
};

//发送文本
ws.send('your message');

//发送 Blob 对象
var file = document
  .querySelector('input[type="file"]')
  .files[0];
ws.send(file);

//发送 ArrayBuffer 对象
// Sending canvas ImageData as ArrayBuffer
var img = canvas_context.getImageData(0, 0, 400, 320);
var binary = new Uint8Array(img.data.length);
for (var i = 0; i < img.data.length; i++) {
  binary[i] = img.data[i];
}
ws.send(binary.buffer);

const crypto = require("crypto");
const MAGIC_KEY = '258EAFA5-E914-47DA-95CA-C5AB0DC85B11';

function generateAcceptValue(secWskey) {
    return crypto
        .createHash("sha1")
        .update(secWskey + MAGIC_KEY, "utf8")
        .digest("base64");

}

function parseMessage(buffer) {
    // 第一个字节，包含了FIN位，opcode, 掩码位
    const firstByte = buffer.readUInt8(0);
    // 右移7位取首位，1位，表示是否是最后一帧数据
    const isFinalFrame = Boolean((firstByte >>> 7) & 0x01);
    console.log("isFIN: ", isFinalFrame);
    // 取出操作码，低四位
    /**
     * %x0：表示一个延续帧。当 Opcode 为 0 时，表示本次数据传输采用了数据分片，当前收到的数据帧为其中一个数据分片；
     * %x1：表示这是一个文本帧（text frame）；
     * %x2：表示这是一个二进制帧（binary frame）；
     * %x3-7：保留的操作代码，用于后续定义的非控制帧；
     * %x8：表示连接断开；
     * %x9：表示这是一个心跳请求（ping）；
     * %xA：表示这是一个心跳响应（pong）；
     * %xB-F：保留的操作代码，用于后续定义的控制帧。
     */
    const opcode = firstByte & 0x0f;
    if (opcode === 0x08) {
        //连接关闭
        return;
    }
    if (opcode === 0x02) {
        //二进制帧
        return;
    }
    if (opcode === 0x01) {
        //文本帧
        let offset = 1;
        const secondByte = buffer.readUInt8(offset);
        // MASK: 1位，表示是否使用了掩码，在发送给服务端的数据帧里必须使用掩码，而服务端返回时不需要掩码
        const useMask = Boolean((secondByte >>> 7) & 0x01);
        console.log(`use MASK: ${useMask}`);

        const payloadLen = secondByte & 0x7f;// 低7位表示载荷字节长度
        offset += 1;
        // 四个字节的掩码
        let MASK = [];
        // 如果这个值在0-125之间，则后面的4个字节（32位）就应该被直接识别成掩码；
        if (payloadLen <= 0x7d) {
            // 载荷长度小于125
            MASK = buffer.slice(offset, 4 + offset);
            offset += 4;
            console.log(`payload length: ${payloadLen}`);
        }
        else if (payloadLen === 0x7e) {
            // 如果这个值是126，则后面两个字节（16位）内容应该，被识别成一个16位的二进制数表示数据内容大小；
            console.log(`payload length: ${buffer.readInt16BE(offset)}`);
            // 长度是126， 则后面两个字节作为payload length，32位的掩码
            MASK = buffer.slice(offset + 2, offset + 2 + 4);
        }
        else {
            // 如果这个值是127，则后面的8个字节（64位）内容应该被识别成一个64位的二进制数表示数据内容大小
            MASK = buffer.slice(offset + 8, offset + 8 + 4);
            offset += 12;
        }

        // 开始读取后面的payload，与掩码计算，得到原来的字节内容
        const newBuffer = [];
        const dataBuffer = buffer.slice(offset);
        for (let i = 0, j = 0; i < dataBuffer.length; i++, j = i % 4) {
            const nextBuf = dataBuffer[i];
            newBuffer.push(nextBuf ^ MASK[j]);
        }
        return Buffer.from(newBuffer).toString();

    }

    return '';
}

function constructReply(data) {
    const json = JSON.stringify(data);
    const jsonByteLength = Buffer.byteLength(json);
    // 目前只支持小于65535字节的负载
    const lengthByteCount = jsonByteLength < 126 ? 0 : 2;
    const payloadLength = lengthByteCount === 0 ? jsonByteLength : 126;
    const buffer = Buffer.alloc(2 + lengthByteCount + jsonByteLength);
    // 设置数据帧首字节，设置opcode为1，表示文本帧
    buffer.writeUInt8(0b10000001, 0);
    buffer.writeUInt8(payloadLength, 1);
    // 如果payloadLength为126，则后面两个字节（16位）内容应该，被识别成一个16位的二进制数表示数据内容大小
    let payloadOffset = 2;
    if (lengthByteCount > 0) {
        buffer.writeUInt16BE(jsonByteLength, 2);
        payloadOffset += lengthByteCount;
    }
    // 把JSON数据写入到Buffer缓冲区中
    buffer.write(json, payloadOffset);
    return buffer;
}

module.exports = {
    generateAcceptValue,
    parseMessage,
    constructReply,
};

const http = require("http");
const port = 8888;
const { generateAcceptValue, parseMessage, constructReply } = require("./util");

const server = http.createServer((req, res) => {
    res.writeHead(200, { "Content-Type": "text/plain;charset=utf-8" });
    res.end("WebSocket Server");
});

server.on("upgrade", (req, socket) => {
    socket.on("data", (buffer) => {
        const message = parseMessage(buffer);
        if(message){
            console.log(`Message from client: ${message}`);
            socket.write(constructReply({message}));
        }
        else if(message ===null){
            console.log("WebSocket connection closed by the client.");
        }
    });

    if (req.headers["upgrade"] !== "websocket") {
        socket.end("HTTP/1.1 400 Bad Request");
        return;
      }
      // 读取客户端提供的Sec-WebSocket-Key
      const secWsKey = req.headers["sec-websocket-key"];
      // 使用SHA-1算法生成Sec-WebSocket-Accept
      const hash = generateAcceptValue(secWsKey);
      // 设置HTTP响应头
      const responseHeaders = [
        "HTTP/1.1 101 Web Socket Protocol Handshake",
        "Upgrade: WebSocket",
        "Connection: Upgrade",
        `Sec-WebSocket-Accept: ${hash}`,
      ];
      // 返回握手请求的响应信息
      socket.write(responseHeaders.join("\r\n") + "\r\n\r\n");
});

server.listen(port, () =>
  console.log(`Server running at http://localhost:${port}`)
);

const ws = new WebSocket("ws://localhost:8888");

ws.onopen = function (event) {
    console.log('连接成功');
}
ws.onmessage = async function (event) {
    console.log('message form server ', event.data);
    const data = event.data;
    console.log('text: ' + data);
}

function send() {
    // if (ws && ws.readyState !== WebSocket.OPEN) {
    //     console.log('连接未建立');
    // }

    var file = document
        .querySelector('#file')
        .files[0];
    if (file) {
        let fileName=file.name;
        //发送text
        ws.send(fileName);
        let reader = new FileReader();
        reader.readAsArrayBuffer(file);
        reader.onload = () => {
            console.log(reader.result);
            //发送二进制ArrayBuffer
            ws.send(reader.result);
        }
    }
}

var file = document.getElementById("file");
file.onchange = function (e) {
    send();
}

let ws = require('nodejs-websocket')
let fs = require('fs')
let fileName = '';
let PORT = 8888;
let path = [];

let server = ws.createServer(function (conn) {
    console.log('New connection')

    conn.on("binary", function (inStream) {
        // Empty buffer for collecting binary data
        var data = Buffer.alloc(0)
        console.log(inStream)
        inStream.on("readable", function () {
            var newData = inStream.read()
            if (newData)
                data = Buffer.concat([data, newData], data.length + newData.length)
        })
        inStream.on("end", function () {
            console.log("Received " + data.length + " bytes of binary data")
            console.log(data)
            fs.writeFile('./files/' + fileName, data, (err) => {
                if (err) throw err;
                console.log('文件已保存');
                let response = {};
                response.message = "文件已保存";
                response.type = 'message';
                conn.sendText(JSON.stringify(response));
            });
        })
    })

    conn.on("text", function (str) {
        console.log("Received" + str);
        fileName = str;
    })

    conn.on("close", function (code, reason) {
        console.log("connection closed")
    })
    
    conn.on("error", function (err) {
        console.log("handle err")
        console.log(err)
    })
}).listen(PORT)

console.log('websocket server listening on port ' + PORT)

let ws = require('nodejs-websocket')
let fs = require('fs')
let fileName = '';
let PORT = 8888;
let file;

let server = ws.createServer(function (conn) {
    console.log('New connection')
    conn.on("binary", function (inStream) {
        // Empty buffer for collecting binary data
        var data = Buffer.alloc(0);
        console.log(inStream)
        inStream.on("readable", function () {
            var newData = inStream.read()
            if (newData)
                data = Buffer.concat([data, newData], data.length + newData.length);
        })

        inStream.on("end", function () {
            console.log("Received " + data.length + " bytes of binary data")
            console.log(data)
            file = Buffer.concat([file, data], file.length + data.length);
            conn.sendText('receiving');
        })
    })
    conn.on("text", function (str) {

        console.log("Received" + str);
        if (str === 'uploaded') {

            fs.writeFile('./files/' + fileName, file, (err) => {
                if (err) throw err;
                console.log('文件已保存');
                conn.sendText('received');
            });

        }
        else {
            fileName = str;
            file = Buffer.alloc(0);
        }

    })
    conn.on("close", function (code, reason) {
        console.log("connection closed")
    })
    conn.on("error", function (err) {
        console.log("handle err");
        console.log(err);
    })
}).listen(PORT)

console.log('websocket server listening on port ' + PORT);