以下是一个简单的WebSocket中间件实现的示例，使用Python语言和Flask框架。

首先，安装Flask：

pip install Flask

然后，编写WebSocket中间件：

from flask import Flask, request
from geventwebsocket.handler import WebSocketHandler
from gevent.pywsgi import WSGIServer
from geventwebsocket.websocket import WebSocket
 
app = Flask(__name__)
 
@app.route('/ws')
def ws():
    # 检查是否是WebSocket请求
    if request.environ.get('wsgi.websocket') is None:
        return 'Must be a WebSocket request.'
    else:
        ws = request.environ['wsgi.websocket']
        while True:
            message = ws.receive()
            if message is not None:
                # 处理接收到的消息
                ws.send(message)  # 将接收到的消息发送回客户端
 
if __name__ == "__main__":
    # 使用gevent WebSocketServer运行Flask应用
    server = WSGIServer(('', 5000), app, handler_class=WebSocketHandler)
    server.serve_forever()

这个示例使用了gevent库来处理WebSocket请求。当客户端连接到ws路由时，服务器接收WebSocket请求，并进入一个循环，处理来自客户端的消息。收到的每条消息都会被发回给客户端。这只是一个简单的示例，实际的应用可能需要更复杂的逻辑处理。

// 创建一个WebSocket实例
var ws = new WebSocket("ws://localhost:9998/echo");
 
// 当WebSocket打开时，发送一个消息
ws.onopen = function(evt) { 
  console.log("Connection open ..."); 
  ws.send("Hello WebSockets!");
};
 
// 接收到服务器消息时，在控制台打印出来
ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
};
 
// 当WebSocket关闭时，在控制台打印信息
ws.onclose = function(evt) {
  console.log("Connection closed.");
};  
 
// 当有错误发生时，在控制台打印错误信息
ws.onerror = function(evt) {
  console.error("Error occured: " + evt.data);
};

这段代码演示了如何创建一个WebSocket实例，并在其不同的生命周期事件中注册回调函数。当WebSocket连接打开时，发送一条消息；接收到服务器的消息时，打印出来；当WebSocket关闭时以及发生错误时，分别打印信息。这是学习WebSocket编程的基础。

以下是一个使用ws库在Node.js中创建WebSocket服务器的简单示例代码：

const WebSocket = require('ws');
 
// 创建WebSocket服务器监听端口3000
const wss = new WebSocket.Server({ port: 3000 });
 
wss.on('connection', function connection(ws) {
  // 当客户端连接时，打印连接信息
  console.log('connected');
 
  // 接收客户端消息
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
 
    // 将接收到的消息发送回客户端
    ws.send('echo: ' + message);
  });
 
  // 当连接关闭时，打印信息
  ws.on('close', function close() {
    console.log('disconnected');
  });
 
  // 发送欢迎消息给客户端
  ws.send('Welcome to the WebSocket server!');
});
 
console.log('WebSocket server is running on ws://localhost:3000');

这段代码创建了一个监听3000端口的WebSocket服务器，并对每个新的连接进行处理：打印连接信息、接收消息、发送回显消息，以及在连接关闭时打印信息。同时，它还向客户端发送一条欢迎消息。这个示例提供了如何使用ws库的基本框架，并展示了如何处理WebSocket连接的常见生命周期事件。

// 使用jQuery建立WebSocket连接
$(document).ready(function() {
    var ws = new WebSocket("ws://your.websocket.server");
 
    ws.onopen = function() {
        console.log('WebSocket 连接已打开');
    };
 
    ws.onerror = function(error) {
        console.log('WebSocket 出错: ' + error);
    };
 
    ws.onmessage = function(event) {
        console.log('收到消息: ' + event.data);
    };
 
    ws.onclose = function() {
        console.log('WebSocket 连接已关闭');
    };
 
    // 发送消息
    ws.send('你好，服务器！');
});

这段代码演示了如何在文档加载完成后，使用jQuery库建立一个WebSocket连接。它设置了打开、错误、消息接收和关闭连接时的回调函数，并演示了如何发送消息到服务器。这是一个简单的WebSocket示例，适合作为学习和实践的起点。

<template>
  <div>
    <audio ref="audioPlayer" controls></audio>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      ws: null,
      buffer: [],
      mediaRecorder: null,
      intervalId: null,
    };
  },
  created() {
    this.connectWebSocket();
  },
  methods: {
    connectWebSocket() {
      this.ws = new WebSocket('ws://your-websocket-server');
      this.ws.onmessage = this.handleMessage;
      this.ws.onopen = this.handleOpen;
      this.ws.onerror = this.handleError;
    },
    handleOpen() {
      console.log('WebSocket connected');
      this.startRecording();
    },
    handleMessage(message) {
      if (message.data instanceof Blob) {
        this.onBlob(message.data);
      }
    },
    handleError(error) {
      console.error('WebSocket Error:', error);
    },
    startRecording() {
      this.mediaRecorder = new MediaRecorder(
        new MediaStream([new MediaStreamTrack(this.createCapturer())]),
        { mimeType: 'audio/webm; codecs=opus' }
      );
      this.mediaRecorder.ondataavailable = this.onBlob;
      this.mediaRecorder.start();
    },
    createCapturer() {
      // 这里需要实现创建捕获器的逻辑，具体取决于你的应用场景
      // 例如从麦克风捕获音频
    },
    onBlob(blob) {
      this.buffer.push(blob);
      if (this.intervalId == null) {
        this.intervalId = setInterval(() => {
          if (this.buffer.length === 0) return;
          const blob = new Blob(this.buffer, { type: 'audio/webm' });
          this.buffer = [];
          this.$refs.audioPlayer.src = URL.createObjectURL(blob);
          this.$refs.audioPlayer.play();
        }, 1000); // 根据需要调整间隔时间
      }
    },
  },
  beforeDestroy() {
    if (this.ws) {
      this.ws.close();
    }
    if (this.mediaRecorder) {
      this.mediaRecorder.stop();
    }
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }
  },
};
</script>

这个代码实例展示了如何在Vue组件中创建一个WebSocket连接，并且使用MediaRecorder API捕获实时的音频流。捕获的音频流会被周期性地发送到服务器，并且实时地在客户端的<audio>元素中播放。这个例子提供了一个基本框架，开发者可以根据自己的应用场景进行具体的实现和调整。

在Windows环境下，使用PHP的socket和HTML5的WebSocket实现服务器和客户端之间的通信，可以参考以下示例代码：

PHP服务端（使用socket）:

<?php
// 创建一个 socket 编程接口
$socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);
socket_bind($socket, '127.0.0.1', 12345); // 绑定要监听的端口
socket_listen($socket); // 开始监听
 
$client = socket_accept($socket); // 接受一个连接
$input = socket_read($client, 1024); // 读取客户端发送过来的信息
 
// 处理接收到的信息
$output = "服务器响应：$input";
socket_write($client, $output, strlen($output)); // 发送信息给客户端
 
socket_close($client); // 关闭socket资源
socket_close($socket);
?>

HTML5客户端（使用WebSocket）:

<!DOCTYPE html>
<html>
<head>
<title>WebSocket Test</title>
</head>
<body>
<script type="text/javascript">
var ws = new WebSocket("ws://127.0.0.1:12345"); // 创建一个WebSocket对象
 
// 当WebSocket连接打开时会触发这个事件
ws.onopen = function(evt) { 
  console.log("Connection open ..."); 
  ws.send("Hello WebSocket"); // 发送信息到服务器端
};
 
// 当服务器发送消息过来时，会触发这个事件
ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  ws.close();
};
 
// 当WebSocket连接关闭时会触发这个事件
ws.onclose = function(evt) {
  console.log("Connection closed.");
};
 
// 当有错误发生时触发这个事件
ws.onerror = function(evt) {
  console.log("Error occured: " + evt.data);
};
</script>
</body>
</html>

确保您的PHP环境支持sockets扩展，如果没有安装，您可以通过运行phpinfo()检查，或者通过在命令行运行php -m来安装。如果需要安装，可以在php.ini文件中启用sockets扩展，或者使用pecl install socket命令进行安装。

以上代码提供了PHP作为服务器端的基本socket通信和HTML5客户端使用WebSocket的基本用法。在实际应用中，您可能需要添加错误处理、消息验证、重连逻辑等以确保通信的可靠性和稳定性。

// Java后端代码，使用Spring Boot和Spring Security
@Controller
@RequestMapping("/api/oss")
public class OssUploadController {
 
    @Autowired
    private OssService ossService;
 
    @MessageMapping("/upload")
    @SendTo("/topic/upload")
    public UploadStatus uploadStatus(UploadStatus status) {
        return status;
    }
 
    @PostMapping("/multipart")
    public ResponseEntity<String> handleFileUpload(@RequestParam("file") MultipartFile file,
                                                  @RequestParam("folder") String folder,
                                                  HttpSession session) {
        String username = SecurityContextHolder.getContext().getAuthentication().getName();
        ossService.uploadFileToOSS(file, folder, username);
        return ResponseEntity.ok("File upload started");
    }
}
 
// Vue前端代码，使用axios和vue-socket.io
<template>
  <div>
    <input type="file" @change="uploadFile" />
    <progress :value="progress" max="100">{{ progress }}%</progress>
  </div>
</template>
 
<script>
import io from 'socket.io-client';
 
export default {
  data() {
    return {
      socket: io('http://localhost:8080/'),
      progress: 0
    };
  },
  methods: {
    uploadFile(event) {
      const file = event.target.files[0];
      const formData = new FormData();
      formData.append('file', file);
      formData.append('folder', 'myfolder');
 
      this.socket.emit('upload', formData);
 
      axios.post('/api/oss/multipart', formData, {
        onUploadProgress: progressEvent => {
          this.progress = parseInt(Math.round((progressEvent.loaded * 100) / progressEvent.total));
        }
      });
    }
  },
  sockets: {
    connect() {
      console.log('Socket connected');
    },
    upload(status) {
      this.progress = status.progress;
    }
  }
};
</script>

这个示例展示了如何使用Java Spring Boot和Spring Security进行OSS文件上传，以及如何使用Vue.js和vue-socket.io实现前端的Websocket进度条功能。代码中包含了文件上传的接口定义和实现，以及进度条的更新逻辑。

package main
 
import (
    "net/http"
 
    "github.com/dgrijalva/jwt-go"
    "github.com/gorilla/websocket"
)
 
var upgrader = websocket.Upgrader{
    CheckOrigin: func(r *http.Request) bool {
        // 在这里设置跨域请求
        return true
    },
}
 
// jwtTokenAuth 是一个中间件，用于验证JWT token
func jwtTokenAuth(h http.HandlerFunc) http.HandlerFunc {
    return func(w http.ResponseWriter, r *http.Request) {
        // 从请求中获取token
        tokenString := r.URL.Query().Get("token")
 
        token, err := jwt.Parse(tokenString, func(token *jwt.Token) (interface{}, error) {
            // 这里应该是你的秘钥
            return []byte("your_secret_key"), nil
        })
 
        if err != nil || !token.Valid {
            http.Error(w, "Invalid token", http.StatusUnauthorized)
            return
        }
 
        h.ServeHTTP(w, r)
    }
}
 
func wsHandler(w http.ResponseWriter, r *http.Request) {
    conn, err := upgrader.Upgrade(w, r, nil)
    if err != nil {
        // 处理错误
        return
    }
    defer conn.Close()
 
    // 使用conn进行通信
}
 
func main() {
    http.HandleFunc("/ws", jwtTokenAuth(wsHandler))
    http.ListenAndServe(":8080", nil)
}

这个代码示例展示了如何在Go中使用jwt-go库来验证WebSocket连接的JWT token。在实际应用中，你需要替换your_secret_key为你的实际秘钥，并且在token.Valid的判断中可能需要根据实际的JWT标准进行额外的验证。

import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.*;
 
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
 
    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic"); // 客户端订阅地址的前缀信息
        config.setApplicationDestinationPrefixes("/app"); // 客户端发送信息的前缀
    }
 
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws").withSockJS(); // 注册STOMP协议的节点，并映射指定的URL，并指定使用SockJS协议
    }
}

这段代码定义了一个WebSocket的配置类，实现了WebSocketMessageBrokerConfigurer接口，通过@EnableWebSocketMessageBroker注解启用了WebSocket消息代理。在configureMessageBroker方法中，我们定义了消息代理的简单中介功能，并指定了客户端订阅地址的前缀。在registerStompEndpoints方法中，我们注册了一个STOMP协议的端点，并指定了URL，同时配置了支持SockJS协议，以便在不支持WebSocket的环境中也能使用。

import (
    "context"
    "log"
    "net/http"
    "github.com/grpc-ecosystem/grpc-gateway/runtime"
    "golang.org/x/net/websocket"
    "google.golang.org/grpc"
)
 
// 假设你有一个gRPC服务和对应的proto文件定义
// 假设你的gRPC服务有一个方法Invoke(context.Context, *Message) (*Message, error)
 
// 此函数将WebSocket连接转发到gRPC服务的Invoke方法
func forwardWebsocketToGrpc(w http.ResponseWriter, r *http.Request) {
    // 创建一个WebSocket连接
    ws, err := websocket.NewConfig(r.URL.String(), "websocket", "grpc-websocket-protocol")
    if err != nil {
        log.Println("WebSocket upgrade error:", err)
        http.Error(w, "WebSocket upgrade error", http.StatusInternalServerError)
        return
    }
    ws.TLSConfig = yourTLSConfig // 如果你的服务使用TLS，需要配置TLS
    wsConn := ws.ToConn()
    defer wsConn.Close()
 
    // 创建gRPC连接
    grpcConn := yourGrpcConnection // 你需要一个有效的gRPC连接
    defer grpcConn.Close()
 
    // 使用gRPC网关运行时将WebSocket消息转发到gRPC服务
    ctx := runtime.NewServerMetadataContext(context.Background(), nil)
    if err := websocket.Message.Send(wsConn, marshal(invokeRequest)); err != nil { // 发送消息到gRPC服务
        log.Println("Error sending to websocket:", err)
        return
    }
    for {
        var resp proto.Message // 假设你有一个protobuf响应消息
        if err := websocket.Message.Receive(wsConn, &resp); err != nil { // 从gRPC服务接收消息
            log.Println("Error receiving from websocket:", err)
            break
        }
        // 处理gRPC响应消息
    }
}
 
func main() {
    // 你需要设置gRPC服务器和注册服务
    grpcServer := grpc.NewServer()
    RegisterYourServiceServer(grpcServer, &yourServiceServer{})
    lis, err := net.Listen("tcp", ":8080")
    if err != nil {
        log.Fatalf("failed to listen: %v", err)
    }
    go grpcServer.Serve(lis)
 
    // 设置HTTP服务器和注册转发处理函数
    http.HandleFunc("/websocket/invoke", forwardWebsocketToGrpc)
    log.Fatal(http.ListenAndServe(":8081", nil))
}

这个代码示例展示了如何将WebSocket连接转发到gRPC服务。需要注意的是，这里的代码是基于假设，因为具体的gRPC服务方法和protobuf定义不是提供的。需要根据实际情况调整代码。