diff --git a/packages/vite/src/node/server/ws.ts b/packages/vite/src/node/server/ws.ts
index 70e21f3e9e6ce5..9cfd4e451e2cb2 100644
--- a/packages/vite/src/node/server/ws.ts
+++ b/packages/vite/src/node/server/ws.ts
@@ -9,7 +9,7 @@ import colors from 'picocolors'
 import type { WebSocket as WebSocketRaw } from 'ws'
 import { WebSocketServer as WebSocketServerRaw_ } from 'ws'
 import type { WebSocket as WebSocketTypes } from 'dep-types/ws'
-import type { ErrorPayload } from 'types/hmrPayload'
+import type { CustomPayload, ErrorPayload, HotPayload } from 'types/hmrPayload'
 import type { InferCustomEventPayload } from 'types/customEvent'
 import type { HotChannelClient, ResolvedConfig } from '..'
 import { isObject } from '../utils'
@@ -67,6 +67,15 @@ export interface WebSocketServer extends NormalizedHotChannel {
 }
 
 export interface WebSocketClient extends HotChannelClient {
+  /**
+   * Send event to the client
+   */
+  send(payload: HotPayload): void
+  // support this signature for backward compatibility
+  /**
+   * Send custom event
+   */
+  send(event: string, payload?: CustomPayload['data']): void
   /**
    * The raw WebSocket instance
    * @advanced
@@ -255,7 +264,17 @@ export function createWebSocketServer(
   function getSocketClient(socket: WebSocketRaw) {
     if (!clientsMap.has(socket)) {
       clientsMap.set(socket, {
-        send: (payload) => {
+        send: (...args: any[]) => {
+          let payload: HotPayload
+          if (typeof args[0] === 'string') {
+            payload = {
+              type: 'custom',
+              event: args[0],
+              data: args[1],
+            }
+          } else {
+            payload = args[0]
+          }
           socket.send(JSON.stringify(payload))
         },
         socket,