webSocket chapter 1

WebSocket.OPEN 是 WebSocket 对象的一个属性，表示 WebSocket 连接的状态。其值为 1，表示连接已经打开并且可以进行通信。

WebSocket 对象的状态有以下几种：

WebSocket.CONNECTING：值为 0，表示连接还未开启。

WebSocket.OPEN：值为 1，表示连接已经开启并且可以进行通信。

WebSocket.CLOSING：值为 2，表示连接正在关闭。

WebSocket.CLOSED：值为 3，表示连接已经关闭或者连接无法建立。

html 复制代码

<!--
 * when you set a variable | function | logic | declaration，please add  a  annotation as possible，God Bless You 🎈
 *  
 * @Author: guoyongkun 👨‍💻
 * @Date: 2024-02-24 09:16:08
 * @LastEditors: guoyongkun 👨
 * @LastEditTime: 2024-02-24 10:19:56
 * @FilePath: /websocket/index.html
 * @Description: please  set some  description for this file , let's improve the  code maintainability 💡 ... 
-->
<!-- index.html -->
<!doctype html>
<html>
  <head>
    <title>WebSocket Demo</title>
  </head>
  <body>
    <button id="sendButton">Send Message</button>
    <script>
      const socket = new WebSocket('ws://localhost:3000');
    //   console.log(socket.binaryType, 'socket.binaryType');
    //   socket.binaryType = 'arraybuffer';
      socket.addEventListener('open', () => {
        console.log('Connected to server');
      });

      socket.addEventListener('message', (event) => {
        console.log('Message from server: ', event.data);
        console.log(event.data+'', 'event.data');
        // blob 转换为字符串
        // const reader = new FileReader();
        // reader.onload = function () {
        //   console.log('reader.result', reader.result);
        // };
        // reader.readAsText(event.data);
      });

      document.getElementById('sendButton').addEventListener('click', () => {
        socket.send('Hello Server!');
      });
    </script>
  </body>
</html>

javascript 复制代码

/*
 * when you set a variable | function | logic | declaration，please add  a  annotation as possible，God Bless You 🎈
 *
 * @Author: guoyongkun 👨‍💻
 * @Date: 2024-02-24 09:17:47
 * @LastEditors: guoyongkun 👨
 * @LastEditTime: 2024-02-24 10:50:19
 * @FilePath: /websocket/server.js
 * @Description: please  set some  description for this file , let's improve the  code maintainability 💡 ...
 */
// server.js
const express = require('express');
const WebSocket = require('ws');
const http = require('http');
// const Blob = require('blob');
const app = express();
// const Blob = require('fetch-blob');
// import Blob from 'fetch-blob';
// console.log('app99',app);
const server = http.createServer(app);
const wss = new WebSocket.Server({server});

wss.on('connection', (ws) => {
  console.log('Client connected');

  ws.on('message', (message) => {
    console.log('Received: ' + message);
    console.log(message + 'message1');
    // Broadcast the message to all clients
    console.log(wss.clients.size, 'wss.clients.size');
    // console.log(wss.clients,'wss.clients');
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        console.log('Send message to client', client.readyState);
        console.log(message, 'message2');
        client.send(message);
      }
    });
  });

  ws.on('close', () => {
    console.log('Client disconnected');
  });
});

server.listen(3000, () => {
  console.log('Server is running on port 3000');
});

import('fetch-blob').then((module) => {
  //   console.log(module, 'module.default');
  //   let blob1 = new module.Blob(['123'], {type: 'text/plain'});
  //   console.log(blob1+'1', 'blob1');
});

// 创建一个长度为 10 的 Buffer，填充为 0
const buf1 = Buffer.alloc(10);
console.log(buf1, 'buf1');//<Buffer 00 00 00 00 00 00 00 00 00 00>
buf1.write('123');
console.log(buf1, 'buf1');//<Buffer 31 32 33 00 00 00 00 00 00 00>
// 读取 Buffer 中的数据
for (let i = 0; i < buf1.length; i++) {
  console.log(buf1[i]); // 打印每个字节 // 49 50 51 0 0 0 0 0 0 0
}
//读取 Buffer 中的数据
console.log(buf1.toString()); /// 123