基于websocket的聊天室发图片

要基于websocket的聊天室发图片，需要以下步骤：

1. 建立websocket连接：使用JavaScript的WebSocket对象建立与服务器的websocket连接。

2. 发送图片：客户端将图片转换为Base64编码，并发送到服务器。服务器接收到图片并广播给所有连接到聊天室的客户端。

3. 接收图片：客户端接收到图片后，将Base64编码转换为图片，并在聊天室中显示出来。

示例代码：

客户端：

var socket = new WebSocket("ws://localhost:8080/chat");

// 发送图片
function sendImage(image) {
  var reader = new FileReader();
  reader.readAsDataURL(image);
  reader.onload = function(event) {
    var base64 = event.target.result;
    socket.send(base64);
  };
}

// 接收图片
socket.onmessage = function(event) {
  var message = event.data;
  if (message.startsWith("data:image")) {
    var img = new Image();
    img.src = message;
    // 在聊天室中显示图片
    document.getElementById("chat-area").appendChild(img);
  } else {
    // 处理文本消息
  }
};

服务器：

const WebSocket = require("ws");
const wss = new WebSocket.Server({ port: 8080 });

wss.on("connection", function(socket) {
  socket.on("message", function(message) {
    if (message.startsWith("data:image")) {
      // 广播图片
      wss.clients.forEach(function(client) {
        if (client !== socket && client.readyState === WebSocket.OPEN) {
          client.send(message);
        }
      });
    } else {
      // 处理文本消息
    }
  });
});