经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 程序设计 » 编程经验 » 查看文章
基于webapi的websocket聊天室（四）
来源：cnblogs　　作者：ggtc　　时间：2024/5/21 8:50:34　　对本文有异议

上一篇实现了多聊天室。这一片要继续改进的是实现收发文件,以及图片显示。

效果

image

问题

websocket本身就是二进制传输。文件刚好也是二进制存储的。
文件本身的传输问题不太，但是需要传输文件元数据，比如文件名和扩展名之类的。这很必要，如果我们想知道怎么展示这个文件的话。比如这个文件是图片还是word？或者是个exe?
有两种解决办法

  • 第一种是先发送文件元数据，在发送文件二进制数据。
  • 第二种则是在websocket上定义一个文件传输协议，将文件元数据和文件二进制数据打包在一个二进制消息中发送，在服务器解析这个二进制数据。

第一种方法很简单，只是服务器至少要接受两次消息，才能完成一个文件发送。第二种方法则能通过一次消息发送传输文件。
我采用第二种方法。

传输协议

在引入文件传输的要求后，我发现简单的文本传输也不能满足了，而是需要商定好的格式化的文本，比如json文本。
要不然客户端怎么知道是要显示一个文件下载链接而不是是普通消息文本？这就需要一个type指定。
由于图片是直接显示，文件是下载。客户端收到的又只是一个字节流，客户端怎么知道对应动作？
所以最好统一使用websocket二进制传输作为聊天室数据传输的方式。
这就需要一个简单的协议了。

  • 普通消息，消息类型用message
  • 发送图片，广播图片二进制，要和普通字节流区分，消息类型用image。
  • 上传文件，然后广播文件链接，要和普通消息区分，消息类型用file。
    比如下载文件，要和普通字节流区分，用文件传输协议。
    我们暂且称这个协议为roomChatProtocal,简称RCP。

RCP

  • RCP对象格式
    发布者 类型 数据
    字段 visitor type data
    类型 string message,file,link,image object
  • RCP传输对象格式
    发布者长度 发布者 类型 数据长度 数据
    字节流 1 byte n byte 1 byte 4 byte m byte
  • 传输方法
    对象是程序中用的，字节流是传输时用的。
    在对象与字节流之间应该有两个转换方法 Serialize Deserialize。

对应实体

在程序中需要一个对象承载RCP的消息

  1. //RCP.cs
  3. // 聊天室文本广播格式
  4. public struct BroadcastData
  5. {
  6.     // 发布者
  7.     public string visitor { get; set; }
  8.     // 广播文本类型
  9.     public BroadcastType type { get; set; }
  10.     // 数据
  11.     public object data { get; set; }
  12. }
  13. // 广播文本类型
  14. public enum BroadcastType:byte
  15. {
  16.     // 发言
  17.     message,
  18.     // 文件
  19.     file,
  20.     // 链接
  21.     link,
  22.     // 图片
  23.     image
  24. }

对应实体传输方法

在使用RCP时需要用特定的序列化和反序列化方法来解析RCP对象

  1. //RCP.cs
  3. // 聊天室文本广播格式
  4. public struct BroadcastData
  5. {
  6.     //...属性
  7. 	
  8.     // 序列化对象
  9.     public static byte[] Serialize(BroadcastData cascade){}
  10.     // 反序列化对象
  11.     public static BroadcastData Deserialize(ArraySegment<byte> data){}
  12. }

type协议

type指示了接收端怎么处理消息。但接收端不仅要知道怎么处理消息，还需要获得正确的能够处理的消息。
所以，每种type还应该有一个对应的消息格式。data字段应遵循这种格式

  • message
    消息长度 消息
    4 byte n byte
  • file
    文件名长度 文件名 文件长度 文件链接 文件内容
    1 byte n byte 4 byte 32 byte m byte
    • 文件名长度
      最大支持256个字节，约60字
    • 文件名
      采用utf8进行编码
    • 文件长度
      最大支持4GB文件传输
    • 文件链接
      ASCll编码，32位UUID
    • 举例
      比如传输一张名为boom.png的图片，其大小为100KB
      那么要传输的二进制数据如下
      文件名长度 文件名 文件长度 文件链接 文件内容
      0x08 0x62 6f 6f 6d 2e 70 6e 67 0x00 01 90 00 32 byte 102400 byte
  • link
    文件名长度 文件名 文件大小 文件链接
    1 byte n byte 4 byte 32 byte
  • image
    图片名长度 图片名 图片长度 图片
    1 byte n byte 4 byte m byte

对应处理方法

  1. //RCP.cs
  3. public class RCP
  4. {
  5.     // 创建消息的RCP传输对象
  6.     public static BroadcastData Message(string visitor, string message){}
  7.     // 解析RCP传输对象的消息
  8.     public static string MessageResolve(BroadcastData broadcastData){}
  10.     // 创建文件的RCP传输对象
  11.     public static BroadcastData File((string fileName,string id, byte[] fileBuffer) file){}
  12.     // 解析RCP传输对象中的文件
  13.     public static (string fileName, string extension,string id, byte[] buffer) FileResolve(BroadcastData broadcastData){}
  15.     // 创建链接的RCP传输对象
  16.     public static BroadcastData Link(string visitor, (string fileName, int fileSize, string id) file){}
  17.     // 解析RCP传输对象中的链接
  18.     public static (string fileName,string id, int fileSize) LinkResolve(BroadcastData broadcastData){}
  20.     // 创建图片的RCP传输对象
  21.     public static BroadcastData Image(string visitor, string imageName, byte[] image){}
  22.     // 解析RCP传输对象中的图片
  23.     public static (string imageName, byte[] buffer) ImageResolve(BroadcastData broadcastData){}
  24. }

聊天室改造

  • 首先需要改造一下类型
  1. //WebSocketChatRoom.cs
  3. // 游客
  4. public class RoomVisitor
  5. {
  6.     public WebSocket Web { get; set; }
  7.     public string Name { get; set; }
  8.     public string Id { get; set; }
  9.     public visitorType type { get; set; }
  10. }
  11. // 游客类型
  12. public enum visitorType:byte
  13. {
  14.     // 聊天室
  15.     room,
  16.     // 游客
  17.     visitor
  18. }
  • 核心方法
    然后是我们的使用了协议后的核心方法，解析消息，然后根据消息类型执行相应分支。
    协议只规定了消息，没规定接受到消息后的动作。
    客户端和服务器段接收到同一类型的消息时，显然有不同动作。
    message file link image
    服务器端 广播 暂存，构造链接，广播链接 单播文件 广播
    客户端 显示 下载 构造下载链接 构造图片显示

所以在这个方法中我们来定义接收到不同类型消息时服务器端的动作

  1. /// <summary>
  2. /// 处理二进制数据
  3. /// </summary>
  4. /// <param name="result"></param>
  5. /// <param name="visitor"></param>
  6. /// <returns></returns>
  7. public async Task handleBytes((ArraySegment<byte> bytes, WebSocketMessageType MessageType) result,RoomVisitor visitor)
  8. {
  9.     BroadcastData recivedData = BroadcastData.Deserialize(result.bytes);
  10.     BroadcastData data;
  11.     switch (recivedData.type)
  12.     {
  13.         case BroadcastType.message://广播消息
  14.             await Broadcast(visitor, recivedData);
  15.             break;
  16.         case BroadcastType.file://文件解析，暂存，广播链接
  17.             (string fileName, string extension,string id, byte[] buffer) resoved = RCP.FileResolve(recivedData);
  18.             await AcceptFile(resoved);
  19.             data = RCP.Link(visitor.Name, ($"{resoved.fileName}.{resoved.extension}", resoved.buffer.Length, resoved.id));
  20.             await Broadcast(visitor, data);
  21.             break;
  22.         case BroadcastType.link://文件下载
  23.             (string fileName, string id, int fileSize) resolved = RCP.LinkResolve(recivedData);
  24.             (string fileName,string id, byte[] fileBuffer) linkFile =await ReadLinkFile(resolved);
  25.             data = RCP.File(linkFile);
  26.             await Unicast(visitor, data);
  27.             break;
  28.         case BroadcastType.image://图片转发
  29.             await Broadcast(visitor, recivedData);
  30.             break;
  31.         default:
  32.             await Broadcast(visitor, new BroadcastData() { type = BroadcastType.message, data = "暂时不支持此消息类型" });
  33.             break;
  34.     }
  35. }

主要就是进行了消息的解析，以及调用了RCP中type的的4组解析方法。

  • 需要用到的其他方法
  1. //WebSocketChatRoom.cs
  3. // 广播
  4. public async Task Broadcast(RoomVisitor visitor,BroadcastData broadcastData){}
  5. // 单播
  6. public async Task Unicast(RoomVisitor visitor, BroadcastData broadcastData){}
  7. // 多次接受消息
  8. public async Task<(ArraySegment<byte> bytes, WebSocketMessageType MessageType)> GetBytes(WebSocket client, byte[] defaultBuffer){}
  9. // 暂存在服务器,并返回
  10. public async Task AcceptFile((string fileName, string extension,string id, byte[] buffer)  file){}
  11. // 读取暂存在服务器的文件
  12.  public async Task<(string fileName, string id, byte[] fileBuffer)> ReadLinkFile((string fileName, string id, int fileSize) link){}

完整代码

WebSocketChatRoom.cs 
  1. /// <summary>
  2. /// 聊天室
  3. /// </summary>
  4. public class WebSocketChatRoom
  5. {
  6.     /// <summary>
  7.     /// 成员
  8.     /// </summary>
  9.     public ConcurrentDictionary<string, RoomVisitor> clients=new ConcurrentDictionary<string, RoomVisitor>();
  11.     private string _roomName;
  12.     public string roomName { 
  13.         get { return _roomName; } 
  14.         set {
  15.             _roomName = value;
  16.             if (room != null)
  17.             {
  18.                 room.Name = value;
  19.             }
  20.             else
  21.             {
  22.                 room = new RoomVisitor() { Name = value,type=visitorType.room };
  23.             }
  24.         } 
  25.     }
  27.     public RoomVisitor room { get; set; }
  29.     public WebSocketChatRoom()
  30.     {
  31.         
  32.     }
  34.     public async Task HandleContext(HttpContext context,WebSocket client)
  35.     {
  36.         //游客加入聊天室
  37.         var visitor = new RoomVisitor() { Id= System.Guid.NewGuid().ToString("N"), Name = $"游客_{clients.Count + 1}", Web = client,type= visitorType.visitor };
  38.         clients.TryAdd(visitor.Id, visitor);
  39.         //广播游客加入聊天室
  40.         await Broadcast(room, RCP.Message(room.Name, $"{visitor.Name}加入聊天室"));
  41.         //消息缓冲区。每个连接分配400字节，100个汉字的内存
  42.         var defaultBuffer = new byte[400];
  43.         //消息循环
  44.         while (!client.CloseStatus.HasValue)
  45.         {
  46.             try
  47.             {
  48.                 var bytesResult = await GetBytes(client, defaultBuffer);
  49.                 if (bytesResult.MessageType == WebSocketMessageType.Text)
  50.                 {
  51.                     //await Cascade(visitor,CascadeMeaasge(visitor,UTF8Encoding.UTF8.GetString(bytesResult.bytes.Array, 0, bytesResult.bytes.Count)));
  52.                 }
  53.                 else if (bytesResult.MessageType == WebSocketMessageType.Binary)
  54.                 {
  55.                     await handleBytes(bytesResult, visitor);
  56.                 }
  57.             }
  58.             catch (Exception e)
  59.             {
  61.             }
  62.         }
  63.         //广播游客退出
  64.         await Broadcast(room, RCP.Message(room.Name, $"{visitor.Name}退出聊天室"));
  65.         await client.CloseAsync(
  66.             client.CloseStatus!.Value,
  67.             client.CloseStatusDescription,
  68.             CancellationToken.None);
  69.         clients.TryRemove(visitor.Id, out RoomVisitor v);
  70.     }
  72.     /// <summary>
  73.     /// 广播
  74.     /// </summary>
  75.     /// <param name="visitor"></param>
  76.     /// <param name="broadcastData"></param>
  77.     /// <returns></returns>
  78.     public async Task Broadcast(RoomVisitor visitor,BroadcastData broadcastData)
  79.     {
  80.         broadcastData.visitor = visitor.Name;
  81.         foreach (var other in clients)
  82.         {
  83.             if (visitor != null)
  84.             {
  85.                 if (other.Key == visitor.Id)
  86.                 {
  87.                     continue;
  88.                 }
  89.             }
  90.             var buffer = BroadcastData.Serialize(broadcastData);
  91.             if (other.Value.Web.State == WebSocketState.Open)
  92.             {
  93.                 await other.Value.Web.SendAsync(buffer, WebSocketMessageType.Binary, true, CancellationToken.None);
  94.             }
  95.         }
  96.     }
  98.     /// <summary>
  99.     /// 单播
  100.     /// </summary>
  101.     /// <param name="visitor"></param>
  102.     /// <param name="broadcastData"></param>
  103.     /// <returns></returns>
  104.     public async Task Unicast(RoomVisitor visitor, BroadcastData broadcastData)
  105.     {
  106.         broadcastData.visitor = visitor.Name;
  107.         var buffer = BroadcastData.Serialize(broadcastData);
  108.         if (visitor.Web.State == WebSocketState.Open)
  109.         {
  110.             await visitor.Web.SendAsync(buffer, WebSocketMessageType.Binary, true, CancellationToken.None);
  111.         }
  112.     }
  115.     /// <summary>
  116.     /// 多次接受消息
  117.     /// </summary>
  118.     /// <param name="client"></param>
  119.     /// <param name="defaultBuffer"></param>
  120.     /// <returns></returns>
  121.     public async Task<(ArraySegment<byte> bytes, WebSocketMessageType MessageType)> GetBytes(WebSocket client, byte[] defaultBuffer)
  122.     {
  123.         int totalBytesReceived = 0;
  124.         int bufferSize = 1024 * 4;  // 可以设为更大，视实际情况而定
  125.         byte[] buffer = new byte[bufferSize];
  126.         WebSocketReceiveResult result;
  127.         do
  128.         {
  129.             if (totalBytesReceived == buffer.Length)  // 如果缓冲区已满，扩展它
  130.             {
  131.                 Array.Resize(ref buffer, buffer.Length + bufferSize);
  132.             }
  134.             var segment = new ArraySegment<byte>(buffer, totalBytesReceived, buffer.Length - totalBytesReceived);
  135.             //!result.EndOfMessage时buffer不一定会被填满
  136.             result = await client.ReceiveAsync(segment, CancellationToken.None);
  137.             totalBytesReceived += result.Count;
  138.         } while (!result.EndOfMessage);
  140.         if (result.MessageType == WebSocketMessageType.Close)
  141.         {
  142.             return (new ArraySegment<byte>(buffer, 0, totalBytesReceived), WebSocketMessageType.Close);
  143.         }
  145.         return (new ArraySegment<byte>(buffer, 0, totalBytesReceived), result.MessageType);
  146.     }
  149.     /// <summary>
  150.     /// 暂存在服务器,并返回
  151.     /// </summary>
  152.     /// <param name="buffer"></param>
  153.     /// <returns></returns>
  154.     public async Task AcceptFile((string fileName, string extension,string id, byte[] buffer)  file)
  155.     {
  156.         string fileName = $"{file.fileName}-{file.id}.{file.extension}";
  157.         //每个聊天室一个文件夹
  158.         string fullName = $@"C:\ChatRoom\{room.Name}\{fileName}";
  159.         string directoryPath = Path.GetDirectoryName(fullName);
  160.         if (!Directory.Exists(directoryPath))
  161.         {
  162.             Directory.CreateDirectory(directoryPath);
  163.         }
  164.          await File.WriteAllBytesAsync(fullName, file.buffer);
  165.     }
  167.     /// <summary>
  168.     /// 读取暂存在服务器的文件
  169.     /// </summary>
  170.     /// <param name="link"></param>
  171.     /// <returns></returns>
  172.     public async Task<(string fileName, string id, byte[] fileBuffer)> ReadLinkFile((string fileName, string id, int fileSize) link)
  173.     {
  174.         string fullName = $@"C:\ChatRoom\{room.Name}\{link.fileName.Split('.')[0]}-{link.id}.{link.fileName.Split('.')[1]}";
  175.         byte[] buffer = await File.ReadAllBytesAsync(fullName);
  176.         return (link.fileName,link.id, fileBuffer:buffer);
  177.     }
  179.     /// <summary>
  180.     /// 处理二进制数据
  181.     /// </summary>
  182.     /// <param name="result"></param>
  183.     /// <param name="visitor"></param>
  184.     /// <returns></returns>
  185.     public async Task handleBytes((ArraySegment<byte> bytes, WebSocketMessageType MessageType) result,RoomVisitor visitor)
  186.     {
  187.         BroadcastData recivedData = BroadcastData.Deserialize(result.bytes);
  188.         BroadcastData data;
  189.         switch (recivedData.type)
  190.         {
  191.             case BroadcastType.message://广播消息
  192.                 await Broadcast(visitor, recivedData);
  193.                 break;
  194.             case BroadcastType.file://文件解析，暂存，广播链接
  195.                 (string fileName, string extension,string id, byte[] buffer) resoved = RCP.FileResolve(recivedData);
  196.                 await AcceptFile(resoved);
  197.                 data = RCP.Link(visitor.Name, ($"{resoved.fileName}.{resoved.extension}", resoved.buffer.Length, resoved.id));
  198.                 await Broadcast(visitor, data);
  199.                 break;
  200.             case BroadcastType.link://文件下载
  201.                 (string fileName, string id, int fileSize) resolved = RCP.LinkResolve(recivedData);
  202.                 (string fileName,string id, byte[] fileBuffer) linkFile =await ReadLinkFile(resolved);
  203.                 data = RCP.File(linkFile);
  204.                 await Unicast(visitor, data);
  205.                 break;
  206.             case BroadcastType.image://图片转发
  207.                 await Broadcast(visitor, recivedData);
  208.                 break;
  209.             default:
  210.                 await Broadcast(visitor, new BroadcastData() { type = BroadcastType.message, data = "暂时不支持此消息类型" });
  211.                 break;
  212.         }
  213.     }
  214. }
  216. /// <summary>
  217. /// 游客
  218. /// </summary>
  219. public class RoomVisitor
  220. {
  221.     public WebSocket Web { get; set; }
  223.     public string Name { get; set; }
  225.     public string Id { get; set; }
  227.     public visitorType type { get; set; }
  228. }
  232. /// <summary>
  233. /// 游客类型
  234. /// </summary>
  235. public enum visitorType:byte
  236. {
  237.     /// <summary>
  238.     /// 聊天室
  239.     /// </summary>
  240.     room,
  241.     /// <summary>
  242.     /// 游客
  243.     /// </summary>
  244.     visitor
  245. }
RCP.cs 
  1. /// <summary>
  2. /// RoomChatProtocal
  3. /// 聊天室数据传输协议
  4. /// </summary>
  5. public class RCP
  6. {
  7.     /// <summary>
  8.     /// 创建消息的RCP传输对象
  9.     /// </summary>
  10.     /// <param name="visitor"></param>
  11.     /// <param name="message"></param>
  12.     public static BroadcastData Message(string visitor, string message)
  13.     {
  14.         return new BroadcastData() { visitor = visitor, type = BroadcastType.message, data = message };
  15.     }
  17.     /// <summary>
  18.     /// 解析RCP传输对象的消息
  19.     /// </summary>
  20.     /// <param name="broadcastData"></param>
  21.     /// <returns></returns>
  22.     public static string MessageResolve(BroadcastData broadcastData)
  23.     {
  24.         return broadcastData.data?.ToString()??"";
  25.     }
  27.     /// <summary>
  28.     /// 创建文件的RCP传输对象
  29.     /// </summary>
  30.     /// <returns></returns>
  31.     public static BroadcastData File((string fileName,string id, byte[] fileBuffer) file)
  32.     {
  33.         BroadcastData data = new BroadcastData();
  34.         data.type = BroadcastType.file;
  35.         int fileNameLength = UTF8Encoding.UTF8.GetByteCount(file.fileName);
  36.         byte[] buffer = new byte[1 + fileNameLength + 4 + 32 + file.fileBuffer.Length];
  37.         BinaryWriter writer = new BinaryWriter(new MemoryStream(buffer));
  38.         writer.Write((byte)fileNameLength);
  39.         writer.Write(UTF8Encoding.UTF8.GetBytes(file.fileName));
  40.         writer.Write(file.fileBuffer.Length);
  41.         writer.Write(ASCIIEncoding.ASCII.GetBytes(file.id));
  42.         writer.Write(file.fileBuffer);
  43.         data.data = buffer;
  44.         return data;
  45.     }
  47.     /// <summary>
  48.     /// 解析RCP传输对象中的文件
  49.     /// </summary>
  50.     /// <param name="broadcastData"></param>
  51.     /// <returns></returns>
  52.     /// <exception cref="NotImplementedException"></exception>
  53.     public static (string fileName, string extension,string id, byte[] buffer) FileResolve(BroadcastData broadcastData)
  54.     {
  55.         BinaryReader reader = new BinaryReader(new MemoryStream((byte[])broadcastData.data));
  56.         int fileNameLength = reader.ReadByte() & 0x000000FF;
  57.         string fileExtensionName = UTF8Encoding.UTF8.GetString(reader.ReadBytes(fileNameLength));
  58.         string fileName= fileExtensionName.Split('.')[0];
  59.         string extension= fileExtensionName.Split(".")[1];
  60.         int fileLength=reader.ReadInt32();
  61.         string id = ASCIIEncoding.ASCII.GetString(reader.ReadBytes(32));
  62.         byte[] buffer= reader.ReadBytes(fileLength);
  63.         return (fileName, extension, id, buffer);
  64.     }
  66.     /// <summary>
  67.     /// 创建链接的RCP传输对象
  68.     /// </summary>
  69.     public static BroadcastData Link(string visitor, (string fileName, int fileSize, string id) file)
  70.     {
  71.         int fileNameLength = UTF8Encoding.UTF8.GetByteCount(file.fileName);
  72.         byte[] buffer = new byte[1 + fileNameLength + 32 + 4];
  73.         BinaryWriter writer = new BinaryWriter(new MemoryStream(buffer));
  74.         writer.Write((byte)fileNameLength);
  75.         writer.Write(UTF8Encoding.UTF8.GetBytes(file.fileName));
  76.         writer.Write(file.fileSize);
  77.         writer.Write(ASCIIEncoding.ASCII.GetBytes(file.id));
  78.         return new BroadcastData()
  79.         {
  80.             visitor = visitor,
  81.             type = BroadcastType.link,
  82.             data = buffer
  83.         };
  84.     }
  86.     /// <summary>
  87.     /// 解析RCP传输对象中的链接
  88.     /// </summary>
  89.     /// <param name="broadcastData"></param>
  90.     /// <returns></returns>
  91.     public static (string fileName,string id, int fileSize) LinkResolve(BroadcastData broadcastData)
  92.     {
  93.         BinaryReader reader = new BinaryReader(new MemoryStream((byte[])broadcastData.data));
  94.         int fileNameLength=reader.ReadByte() & 0x000000FF;
  95.         string fileName= UTF8Encoding.UTF8.GetString(reader.ReadBytes(fileNameLength));
  96.         int fileLength=reader.ReadInt32();
  97.         string id=ASCIIEncoding.ASCII.GetString(reader.ReadBytes(32));
  98.         return (fileName, id, fileLength);
  99.     }
  101.     /// <summary>
  102.     /// 创建图片的RCP传输对象
  103.     /// </summary>
  104.     /// <param name="visitor"></param>
  105.     /// <param name="imageName"></param>
  106.     /// <param name="image"></param>
  107.     /// <returns></returns>
  108.     public static BroadcastData Image(string visitor, string imageName, byte[] image)
  109.     {
  110.         BroadcastData data = new BroadcastData();
  111.         data.visitor = visitor;
  112.         data.type = BroadcastType.image;
  113.         int fileNameLength = UTF8Encoding.UTF8.GetByteCount(imageName);
  114.         byte[] buffer = new byte[1 + fileNameLength + 4 + 32 + image.Length];
  115.         BinaryWriter writer = new BinaryWriter(new MemoryStream(buffer));
  116.         writer.Write((byte)fileNameLength);
  117.         writer.Write(UTF8Encoding.UTF8.GetBytes(imageName));
  118.         writer.Write(image.Length);
  119.         writer.Write(image);
  120.         data.data = buffer;
  121.         return data;
  122.     }
  124.     /// <summary>
  125.     /// 解析RCP传输对象中的图片
  126.     /// </summary>
  127.     /// <param name="broadcastData"></param>
  128.     /// <returns></returns>
  129.     public static (string imageName, byte[] buffer) ImageResolve(BroadcastData broadcastData)
  130.     {
  131.         BinaryReader reader = new BinaryReader(new MemoryStream((byte[])broadcastData.data));
  132.         int imageNameLength = reader.ReadByte() & 0x000000FF;
  133.         string imageExtensionName = UTF8Encoding.UTF8.GetString(reader.ReadBytes(imageNameLength));
  134.         int imageLength = reader.ReadInt32();
  135.         byte[] buffer = reader.ReadBytes(imageLength);
  136.         return (imageExtensionName, buffer);
  137.     }
  138. }
  139. /// <summary>
  140. /// RCP传输对象
  141. /// </summary>
  142. public struct BroadcastData
  143. {
  144.     /// <summary>
  145.     /// 发布者
  146.     /// </summary>
  147.     public string visitor { get; set; }
  149.     /// <summary>
  150.     /// 广播文本类型
  151.     /// </summary>
  152.     public BroadcastType type { get; set; }
  154.     /// <summary>
  155.     /// 数据
  156.     /// </summary>
  157.     public object data { get; set; }
  159.     /// <summary>
  160.     /// 序列化对象
  161.     /// </summary>
  162.     /// <param name="broadcast"></param>
  163.     /// <returns></returns>
  164.     /// <exception cref="Exception"></exception>
  165.     public static byte[] Serialize(BroadcastData broadcast)
  166.     {
  167.         using (MemoryStream memoryStream = new MemoryStream())
  168.         {
  169.             //utf8编码字符串
  170.             using (BinaryWriter writer = new BinaryWriter(memoryStream))
  171.             {
  172.                 //visitor长度，1字节
  173.                 writer.Write((byte)UTF8Encoding.UTF8.GetByteCount(broadcast.visitor));
  174.                 //visitor，n字节
  175.                 writer.Write(UTF8Encoding.UTF8.GetBytes(broadcast.visitor));
  176.                 //type，一字节
  177.                 writer.Write((byte)broadcast.type);
  178.                 //data，要么是字符串，要么是数组
  179.                 if (broadcast.data is string stringData)
  180.                 {
  181.                     //int长度，4字节
  182.                     writer.Write((UTF8Encoding.UTF8.GetByteCount(stringData)));
  183.                     //data内容，m字节
  184.                     writer.Write(UTF8Encoding.UTF8.GetBytes(stringData));
  185.                 }
  186.                 else if (broadcast.data is ArraySegment<byte> ArraySegmentData)
  187.                 {
  188.                     //int长度，4字节
  189.                     writer.Write(ArraySegmentData.Count);
  190.                     //data内容，m字节
  191.                     writer.Write(ArraySegmentData);
  192.                 }
  193.                 else if (broadcast.data is byte[] bytesData)
  194.                 {
  195.                     //int长度，4字节
  196.                     writer.Write(bytesData.Length);
  197.                     //data内容，m字节
  198.                     writer.Write(bytesData);
  199.                 }
  200.                 else
  201.                 {
  202.                     throw new Exception("不支持的data类型,只能是string或ArraySegment<byte>");
  203.                 }
  204.             }
  205.             return memoryStream.ToArray();
  206.         }
  207.     }
  209.     /// <summary>
  210.     /// 反序列化对象
  211.     /// </summary>
  212.     /// <param name="data"></param>
  213.     /// <returns></returns>
  214.     public static BroadcastData Deserialize(ArraySegment<byte> data)
  215.     {
  216.         BroadcastData broadcastData = new BroadcastData();
  217.         BinaryReader br = new BinaryReader(new MemoryStream(data.Array!));
  218.         int visitorLength = br.ReadByte() & 0x000000FF;
  219.         broadcastData.visitor = UTF8Encoding.UTF8.GetString(br.ReadBytes(visitorLength));
  220.         broadcastData.type = (BroadcastType)br.ReadByte();
  221.         int dataLength = br.ReadInt32();
  222.         broadcastData.data = br.ReadBytes(dataLength);
  223.         return broadcastData;
  224.     }
  225. }
  227. /// <summary>
  228. /// 消息类型
  229. /// </summary>
  230. public enum BroadcastType : byte
  231. {
  232.     /// <summary>
  233.     /// 发言
  234.     /// </summary>
  235.     message,
  236.     /// <summary>
  237.     /// 文件传输
  238.     /// </summary>
  239.     file,
  240.     /// <summary>
  241.     /// 文件下载链接
  242.     /// </summary>
  243.     link,
  244.     /// <summary>
  245.     /// 图片查看
  246.     /// </summary>
  247.     image
  248. }

web客户端

我简单写了个web客户端。也实现了RCP。

chatRoomClient.html 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>聊天室</title>
  7. </head>
  8. <style>
  9.     html{
  10.         height: calc(100% - 16px);
  11.         margin: 8px;
  12.     }
  13.     body{
  14.         height: 100%;
  15.         margin: 0;
  16.     }
  17. </style>
  18. <body>
  19.     <div style="height: 100%;display: grid;grid-template: auto 1fr 100px/1fr;row-gap: 8px;">
  20.         <div style="grid-area: 1/1/2/2;">
  21.             <div style="display: grid;grid: 1fr/1fr 100px;column-gap: 8px;">
  22.                 <div style="grid-area: 1/1/1/2;display: flex;justify-content: end;">
  23.                     <label>房间</label>
  24.                     <input style="width: 300px;" value="ws://localhost:5234/chat/房间号" name="room" oninput="changeroom(event)"/>
  25.                 </div>
  26.                 <button style="grid-area: 1/2/1/3;" onclick="connectRoom()" id="open">打开连接</button>
  27.             </div>
  28.         </div>
  29.         <div style="grid-area: 2/1/3/2;background-color: #eeeeee;overflow-y: auto;" id="chatMessages"></div>
  30.         <div style="grid-area: 3/1/4/2;position: relative;">
  31.             <div class="toolbar">
  32.                 <button onclick="sendimage()">图片</button>
  33.                 <button onclick="sendFile()">文件</button>
  34.             </div>
  35.             <textarea style="width: calc(100% - 20px);padding: 5px 10px;height: calc(100% - 33px);font-size: 16px;" id="msg"></textarea>
  36.             <button style="position: absolute;right: 10px;bottom: 5px;" onclick="sendmsg()">发送</button>
  37.         </div>
  38.     </div>
  40.     <script>
  41.         var socket;
  42.         var isopen=false;    
  44.         function changeroom(e){
  45.             document.title=`聊天室-${e.srcElement.value.split('/').reverse()[0]}`;
  46.         }
  47.         function sendmsg(){
  48.             var msg=document.getElementById('msg').value;
  49.             if(msg=='')return
  50.             if(!isopen)return
  51.             if(isopen){
  52.                 var broadcastData=RCP.Message(msg);
  53.                 var buffer=BroadcastData.Serialize(broadcastData);
  54.                 socket.send(buffer);
  55.                 broadcastData.visitor='我';
  56.                 broadcastData.data=RCP.MessageResolve(broadcastData);
  57.                 appendMsg(broadcastData,'right');
  58.                 document.getElementById('msg').value='';
  59.             }
  60.         }
  61.         function sendimage(){
  62.             if(!isopen)return;
  63.             var input=document.createElement('input');
  64.             input.type='file';
  65.             input.accept='image/jpeg,image/png'
  66.             input.click();
  67.             input.onchange=e=>{
  68.                 if(e.srcElement.files.length==0)return;
  69.                 var image=e.srcElement.files[0];
  70.                 var fileReader=new FileReader();
  71.                 fileReader.onload=()=>{
  72.                     var broadcastData= RCP.Image(image.name,fileReader.result);
  73.                     var buffer=BroadcastData.Serialize(broadcastData);
  74.                     socket.send(buffer);
  75.                     broadcastData.visitor='我';
  76.                     var resolvedImage=RCP.ImageResolve(broadcastData);
  77.                     var extension=resolvedImage.imageName.split('.')[resolvedImage.imageName.split('.').length-1];
  78.                     resolvedImage.buffer=createDataURL(extension,resolvedImage.buffer);
  79.                     broadcastData.data=resolvedImage.buffer;
  80.                     appendImage(broadcastData,'right');
  81.                 }
  82.                 fileReader.readAsArrayBuffer(image);
  83.             }
  84.         }
  85.         function sendFile(){
  86.             if(!isopen)return;
  87.             var input=document.createElement('input');
  88.             input.type='file';
  89.             input.click();
  90.             input.onchange=e=>{
  91.                 if(e.srcElement.files.length==0)return;
  92.                 var file=e.srcElement.files[0];
  93.                 var fileReader=new FileReader();
  94.                 fileReader.onload=()=>{
  95.                     var broadcastData= RCP.File(file.name,fileReader.result);
  96.                     var buffer=BroadcastData.Serialize(broadcastData);
  97.                     socket.send(buffer);
  98.                     broadcastData.visitor='我';
  99.                     var resolve=RCP.FileResolve(broadcastData);
  100.                     broadcastData.data={fileName:`${resolve.fileName}.${resolve.extension}`,id:resolve.id,fileSize:resolve.buffer.length};
  101.                     appendLink(broadcastData,'right');
  102.                 }
  103.                 fileReader.readAsArrayBuffer(file);
  104.             }
  105.         }
  106.         function downloadLink(fileName,id,fileSize){
  107.             var broadcastData= RCP.Link(fileName,id,fileSize);
  108.             var buffer=BroadcastData.Serialize(broadcastData);
  109.             socket.send(buffer);
  110.         }
  111.         function downloadFile(fileInfo){
  112.             const url=createDataURL(fileInfo.extension,fileInfo.buffer);
  113.             var download=document.createElement('a');
  114.             download.href=url;
  115.             download.download=`${fileInfo.fileName}.${fileInfo.extension}`;
  116.             download.click();
  117.         }
  118.         function connectRoom(){
  119.             if (isopen==true) {
  120.                 socket.close();
  121.                 return;
  122.             }
  123.             var route=document.getElementsByName('room')[0].value;
  124.             try {                
  125.                 socket=new WebSocket(route);   
  126.             } catch (error) {
  127.                 console.log(error);
  128.                 isopen=false;
  129.                 document.getElementById('open').innerText='打开连接';
  130.                 return
  131.             }            
  132.             socket.addEventListener('open', (event) => {
  133.                 isopen=true;
  134.                 document.getElementById('open').innerText='关闭连接'
  135.             });
  136.             socket.addEventListener('message', (event) => {
  137.                 // 处理接收到的消息
  138.                 console.log('Received:', event.data);
  139.                 var fileReader = new FileReader();
  140.                 fileReader.onload=function(event){
  141.                     arrayBufferNew = event.target.result;
  142.                     // uint8ArrayNew = new Uint8Array(arrayBufferNew);
  143.                     handleBytes(arrayBufferNew);
  144.                 }
  145.                 fileReader.readAsArrayBuffer(event.data);
  146.             });
  147.             socket.addEventListener('close',event=>{
  148.                 isopen=false;
  149.                 document.getElementById('open').innerText='打开连接';
  150.             })
  151.         }
  152.         function handleBytes(arrayBufferNew){
  153.             var broadcastData=BroadcastData.Deserialize(arrayBufferNew);
  154.             switch (broadcastData.type) {
  155.                 case BroadcastType.message:
  156.                     var msg=RCP.MessageResolve(broadcastData);
  157.                     broadcastData.data=msg;
  158.                     appendMsg(broadcastData);
  159.                     break;
  160.                 case BroadcastType.image:
  161.                     var image=RCP.ImageResolve(broadcastData);
  162.                     var extension=image.imageName.split('.')[image.imageName.split('.').length-1];
  163.                     image.buffer=createDataURL(extension,image.buffer);
  164.                     broadcastData.data=image.buffer;
  165.                     appendImage(broadcastData);
  166.                     break;
  167.                 case BroadcastType.link:
  168.                     var linkInfo=RCP.LinkResolve(broadcastData);
  169.                     broadcastData.data=linkInfo;
  170.                     appendLink(broadcastData);
  171.                     break;
  172.                 case BroadcastType.file:
  173.                     var fileInfo=RCP.FileResolve(broadcastData);
  174.                     downloadFile(fileInfo);
  175.                     break;
  176.                 default:
  177.                     break;
  178.             }
  179.         }
  181.         function appendMsg(broadcastData,dock){
  182.             var chatMessages = document.getElementById('chatMessages');
  183.             if(dock!='right'){
  184.                 chatMessages.innerHTML+=`
  185.                 <div style="padding:10px;">
  186.                     <div>${broadcastData.visitor}</div>
  187.                     <div style="padding:0 50px;">                    
  188.                         <div style="display:inline-block;padding:5px;border-radius:5px;background-color:#ffffff;">${broadcastData.data}</div>
  189.                     </div>
  190.                 </div>`;
  191.             }
  192.             else{
  193.                 chatMessages.innerHTML+=`
  194.                 <div style="padding:10px;display:flex;flex-direction: column;align-items: flex-end;">
  195.                     <div>${broadcastData.visitor}</div>
  196.                     <div style="padding:0 50px;">                    
  197.                         <div style="display:inline-block;padding:5px;border-radius:5px;background-color:#ffffff;">${broadcastData.data}</div>
  198.                     </div>
  199.                 </div>`;
  200.             }
  201.             // 使用 scrollIntoView 方法将底部元素滚动到可见区域
  202.             chatMessages.lastChild.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'nearest' });
  203.         }
  204.         function appendImage(broadcastData,dock){
  205.             var chatMessages = document.getElementById('chatMessages');
  206.             if(dock!='right'){
  207.                 chatMessages.innerHTML+=`
  208.                 <div style="padding:10px;">
  209.                     <div>${broadcastData.visitor}</div>
  210.                     <div style="padding:0 50px;">                    
  211.                         <div style="display:inline-block;padding:5px;border-radius:5px;background-color:#ffffff;"><img style="height:100px;" src="${broadcastData.data}"></img></div>
  212.                     </div>
  213.                 </div>`;
  214.             }
  215.             else{
  216.                 chatMessages.innerHTML+=`
  217.                 <div style="padding:10px;display:flex;flex-direction: column;align-items: flex-end;">
  218.                     <div>${broadcastData.visitor}</div>
  219.                     <div style="padding:0 50px;">                    
  220.                         <div style="display:inline-block;padding:5px;border-radius:5px;background-color:#ffffff;"><img style="height:100px;" src="${broadcastData.data}"></img></div>
  221.                     </div>
  222.                 </div>`;
  223.             }
  224.             // 使用 scrollIntoView 方法将底部元素滚动到可见区域
  225.             chatMessages.lastChild.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'nearest' });
  226.         }
  227.         function appendLink(broadcastData,dock){
  228.             var chatMessages = document.getElementById('chatMessages');
  229.             if(dock!='right'){
  230.                 chatMessages.innerHTML+=`
  231.                 <div style="padding:10px;">
  232.                     <div>${broadcastData.visitor}</div>
  233.                     <div style="padding:0 50px;">                    
  234.                         <div style="display:inline-block;padding:5px;border-radius:5px;background-color:#ffffff;">
  235.                             <div style="display:grid;grid-template:2fr 1fr/1fr/auto;row-gap:5px;">
  236.                                 <div style="grid-area:1/1/2/2;font-size:18px;max-width:300px;padding:0 5px;">${broadcastData.data.fileName}</div>    
  237.                                 <div style="grid-area:2/1/3/2;font-size:12px;padding:0 5px;">${broadcastData.data.fileSize}字节</div>   
  238.                                 <div style="grid-area:1/2/3/3;display:flex;align-items:center;padding:0 5px;background-color:lightblue;cursor:pointer;">
  239.                                     <div style="display:inline-block;" onclick="downloadLink('${broadcastData.data.fileName}','${broadcastData.data.id}',${broadcastData.data.fileSize})">下载?</div>
  240.                                 </div>   
  241.                             </div>
  242.                         </div>
  243.                     </div>
  244.                 </div>`;
  245.             }
  246.             else{
  247.                 chatMessages.innerHTML+=`
  248.                 <div style="padding:10px;display:flex;flex-direction: column;align-items: flex-end;">
  249.                     <div>${broadcastData.visitor}</div>
  250.                     <div style="padding:0 50px;">                    
  251.                         <div style="display:inline-block;padding:5px;border-radius:5px;background-color:#ffffff;">
  252.                             <div style="display:grid;grid-template:2fr 1fr/1fr/auto;row-gap:5px;">
  253.                                 <div style="grid-area:1/1/2/2;font-size:18px;max-width:300px;padding:0 5px;">${broadcastData.data.fileName}</div>    
  254.                                 <div style="grid-area:2/1/3/2;font-size:12px;padding:0 5px;">${broadcastData.data.fileSize}字节</div>   
  255.                                 <div style="grid-area:1/2/3/3;display:flex;align-items:center;padding:0 5px;background-color:lightgreen;">
  256.                                     <div style="display:inline-block;">上传</div>
  257.                                 </div> 
  258.                             </div>
  259.                         </div>
  260.                     </div>
  261.                 </div>`;
  262.             }
  263.             // 使用 scrollIntoView 方法将底部元素滚动到可见区域
  264.             chatMessages.lastChild.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'nearest' });
  265.         }
  267.         function getMIME(params) {
  268.                 switch (params) {
  269.                     case 'jpg':
  270.                         return 'image/jpeg';
  271.                     case 'jpeg':
  272.                         return 'image/jpeg';
  273.                     case 'png':
  274.                         return 'image/png';
  275.                     default:
  276.                         break;
  277.                 }
  278.             }
  279.         function createDataURL(extension,buffer){
  280.             // 将 ArrayBuffer 包装成 Blob 对象
  281.             var MIME = getMIME(extension)
  282.             const blob = new Blob([buffer], { type: MIME });
  283.             // 使用 URL.createObjectURL() 创建 Blob 对象的 URL
  284.             const url = URL.createObjectURL(blob);
  285.             return url;
  286.         }
  288.     </script>
  290.     <script>
  291.         class BroadcastType{
  292.             static message=new Uint8Array([0])[0]
  293.             static file=new Uint8Array([1])[0]
  294.             static link=new Uint8Array([2])[0]
  295.             static image=new Uint8Array([3])[0]
  296.         }
  297.         class BroadcastData{
  298.             visitor;
  299.             type;
  300.             data;
  301.             static Serialize(broadcast){
  302.                 var writer=new BinaryWriter();
  303.                 writer.write(new Uint8Array([0]));
  304.                 writer.write(new Uint8Array([broadcast.type]));                
  305.                 writer.writeInt32(broadcast.data.byteLength);
  306.                 writer.write(new Uint8Array(broadcast.data));
  307.                 return writer.toArray();
  308.             }
  309.             static Deserialize(buffer){
  310.                 var broadcastData=new BroadcastData();
  311.                 var reader=new BinaryReader(buffer);
  312.                 var visitorLength=reader.readByte();
  313.                 var visitorBytes = reader.readBytes(visitorLength);
  314.                 broadcastData.visitor = new TextDecoder().decode(visitorBytes);
  315.                 broadcastData.type=reader.readByte();
  316.                 var dataLength=reader.readInt32(4);
  317.                 broadcastData.data = reader.readBytes(dataLength);
  318.                 return broadcastData;
  319.             }
  320.         }
  321.         class RCP{
  322.             static Message(message){
  323.                 var broadcastData=new BroadcastData();
  324.                 var coder=new TextEncoder();
  325.                 broadcastData.type=BroadcastType.message;
  326.                 var data=coder.encode(message);
  327.                 broadcastData.data=data;
  328.                 return broadcastData;
  329.             }
  330.             static MessageResolve(broadcastData){
  331.                 return new TextDecoder().decode(broadcastData.data);
  332.             }
  333.             static Image(imageName,imageBuffer){
  334.                 var data = new BroadcastData();
  335.                 data.type=BroadcastType.image;
  336.                 var imageNameLength=new TextEncoder().encode(imageName).length;
  337.                 var writer=new BinaryWriter();
  338.                 writer.write(new Uint8Array([imageNameLength]));
  339.                 writer.write(new TextEncoder().encode(imageName));
  340.                 writer.writeInt32(imageBuffer.byteLength);
  341.                 writer.write(new Uint8Array(imageBuffer));
  342.                 data.data = writer.toArray();
  343.                 return data;
  344.             }
  345.             static ImageResolve(broadcastData){
  346.                 var data=broadcastData.data
  347.                 if(broadcastData.data instanceof Uint8Array)
  348.                     data=data.buffer.slice(data.byteOffset, data.byteOffset + data.byteLength);
  349.                 var reader=new BinaryReader(data);
  350.                 var imageNameLength=reader.readByte();
  351.                 var coder=new TextDecoder();
  352.                 var imageExtensionName=coder.decode(reader.readBytes(imageNameLength));
  353.                 var imageLength=reader.readInt32();
  354.                 var buffer=reader.readBytes(imageLength);
  355.                 return {imageName:imageExtensionName,buffer:buffer};
  356.             }
  357.             static File(fileName,fileBuffer){
  358.                 var data = new BroadcastData();
  359.                 data.type=BroadcastType.file;
  360.                 var fileNameLength=new TextEncoder().encode(fileName).length;
  361.                 var writer=new BinaryWriter();
  362.                 writer.write(new Uint8Array([fileNameLength]));
  363.                 writer.write(new TextEncoder().encode(fileName));
  364.                 writer.writeInt32(fileBuffer.byteLength);
  365.                 var uuid=this.#generateUUID();
  366.                 var uint8uuid=this.#asciiToUint8Array(uuid);
  367.                 writer.write(uint8uuid);
  368.                 writer.write(new Uint8Array(fileBuffer));
  369.                 data.data = writer.toArray();
  370.                 return data;
  371.             }
  372.             static FileResolve(broadcastData){
  373.                 var data=broadcastData.data
  374.                 if(broadcastData.data instanceof Uint8Array)
  375.                     data=data.buffer.slice(data.byteOffset, data.byteOffset + data.byteLength);
  376.                 var reader=new BinaryReader(data);
  377.                 var fileNameLength=reader.readByte();
  378.                 var coder=new TextDecoder();
  379.                 var fileExtensionName=coder.decode(reader.readBytes(fileNameLength));
  380.                 var extension=fileExtensionName.split('.')[fileExtensionName.split('.').length-1];
  381.                 var fileLength=reader.readInt32();
  382.                 var linkbyte=reader.readBytes(32);
  383.                 var link=this.#uint8ArrayToAscii(linkbyte);
  384.                 var buffer=reader.readBytes(fileLength);
  385.                 return {fileName:fileExtensionName.replace(`.${extension}`,''),extension:extension,id:link,buffer:buffer}
  386.             }
  387.             static Link(fileName,id,fileSize){
  388.                 var data = new BroadcastData();
  389.                 data.type=BroadcastType.link;
  390.                 var fileNameLength=new TextEncoder().encode(fileName).length;
  391.                 var writer=new BinaryWriter();
  392.                 writer.write(new Uint8Array([fileNameLength]));
  393.                 writer.write(new TextEncoder().encode(fileName));
  394.                 writer.writeInt32(fileSize);
  395.                 var uint8uuid=this.#asciiToUint8Array(id);
  396.                 writer.write(uint8uuid);
  397.                 data.data = writer.toArray();
  398.                 return data;
  399.             }
  400.             static LinkResolve(broadcastData){
  401.                 var data=broadcastData.data
  402.                 if(broadcastData.data instanceof Uint8Array)
  403.                     data=data.buffer.slice(data.byteOffset, data.byteOffset + data.byteLength);
  404.                 var reader=new BinaryReader(data);
  405.                 var fileNameLength=reader.readByte();
  406.                 var coder=new TextDecoder();
  407.                 var fileExtensionName=coder.decode(reader.readBytes(fileNameLength));
  408.                 var fileLength=reader.readInt32();
  409.                 var linkbyte=reader.readBytes(32);
  410.                 var link=this.#uint8ArrayToAscii(linkbyte);
  411.                 return {fileName:fileExtensionName,id:link,fileSize:fileLength};
  412.             }
  414.             //工具函数
  415.             static #generateUUID() {
  416.                 // 生成随机的 UUID
  417.                 const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
  418.                     const r = Math.random() * 16 | 0;
  419.                     const v = c === 'x' ? r : (r & 0x3 | 0x8);
  420.                     return v.toString(16);
  421.                 });
  422.                 return uuid.replace(/-/g, ''); // 移除横线，得到 32 位的 UUID
  423.             }
  424.             static #asciiToUint8Array(str) {
  425.                 const uint8Array = new Uint8Array(str.length);
  426.                 for (let i = 0; i < str.length; i++) {
  427.                     uint8Array[i] = str.charCodeAt(i);
  428.                 }
  429.                 return uint8Array;
  430.             }
  431.             static #uint8ArrayToAscii(uint8Array) {
  432.                 let asciiString = '';
  433.                 for (let i = 0; i < uint8Array.length; i++) {
  434.                     asciiString += String.fromCharCode(uint8Array[i]);
  435.                 }
  436.                 return asciiString;
  437.             }
  439.         }
  440.         class BinaryReader {
  441.             #position;
  442.             #buffer;
  443.             #dataView;
  444.             constructor(arrayBuffer) {
  445.                 this.#buffer = arrayBuffer;
  446.                 this.#position = 0;
  447.                 this.#dataView=new DataView(arrayBuffer);
  448.             }
  451.             readByte() {
  452.                 var value=this.#dataView.getInt8(this.#position,true);
  453.                 this.#position+=1;
  454.                 return value;
  455.             }
  456.             readBytes(length) {
  457.                 var bytes = new Uint8Array(this.#buffer, this.#position, length);
  458.                 this.#position += length;
  459.                 return bytes;
  460.             }
  461.             readInt32(){
  462.                 var value=this.#dataView.getInt32(this.#position,true);
  463.                 this.#position+=4;
  464.                 return value;
  465.             }
  466.         }
  467.         class BinaryWriter {
  468.             #data;
  469.             constructor() {
  470.                 this.#data = [];
  471.             }
  472.             // 向流中添加数据
  473.             write(chunk) {
  474.                 for (let i = 0; i < chunk.byteLength; i++) {
  475.                     this.#data.push(chunk[i]);
  476.                 }
  477.             }
  478.             // 将收集到的数据转换为 ArrayBuffer
  479.             toArray() {
  480.                 const buffer = new ArrayBuffer(this.#data.length);
  481.                 const view = new Uint8Array(buffer);
  482.                 for (let i = 0; i < this.#data.length; i++) {
  483.                     view[i] = this.#data[i];
  484.                 }
  485.                 return buffer;
  486.             }
  487.             writeInt32(number){
  488.                 // 创建一个 ArrayBuffer，大小为 4 字节
  489.                 const buffer = new ArrayBuffer(4);
  490.                 // 创建一个 DataView，用于操作 ArrayBuffer
  491.                 const dataView = new DataView(buffer);
  492.                 // 将一个数值写入到 DataView 中
  493.                 dataView.setInt32(0, number, true); // 第二个参数表示字节偏移量，第三个参数表示是否使用小端序（true 表示使用）
  494.                 // 创建一个 Uint8Array，从 ArrayBuffer 中获取数据
  495.                 const uint8Array = new Uint8Array(buffer);
  496.                 this.write(uint8Array);
  497.         }
  498.     }
  500.     </script>
  501. </body>
  502. </html>

原文链接：https://www.cnblogs.com/ggtc/p/18190128

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

编程经验热门文章

  • Prometheus监控之SNMP Exporter介绍和数据展现
  • Intel 82599网卡异常挂死原因
  • 腾讯防水墙的分析识别与破解
  • 桌面应用自动化WinAppDriver入门
  • 文档在线预览（三）使用js前端实现word、excel、pdf、ppt 在线预览
  • 「教程」如何下载AcFun网站上的视频、A站视频下载工具
  • 基于Hi3559AV100的SVP(NNIE)开发整体流程
  • GBDT(梯度提升树)scikit-klearn中的参数说明及简汇
  • antd之RangePicker设置默认值方式
  • 决胜经典算法之插入排序

    • 编程经验推荐文章

  • wifi基础(一)：无线电波与WIFI信号干扰、衰减
  • 甲方扔给两个存在包名与类名均相同的Jar包，要在工程中同时使用怎么办？
  • 《花100块做个摸鱼小网站! 》第三篇—热搜表结构设计和热搜数据存储
  • Fluent Editor：一个基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
  • 方法的三种调用形式
  • 《花100块做个摸鱼小网站! 》第二篇—后端应用搭建和完成第一个爬虫
  • 《熬夜整理》保姆级系列教程-玩转Wireshark抓包神器教程(4)-再识Wireshark - 北京-宏哥
  • 《软件性能测试分析与调优实践之路》(第2版) 读书笔记（二）总体介绍（下）-真正从性能分析与调优来看性能测试
  • 架构知识点（三）
  • 《花100块做个摸鱼小网站! 》第一篇—买云服务器和初始化环境

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号