Fix streamable HTTP transport connection cleanup

Co-authored-by: pavelfeldman <883973+pavelfeldman@users.noreply.github.com>

README.md

@@ -297,24 +297,26 @@ npx @playwright/mcp@latest --config path/to/config.json
 ### Standalone MCP server
 
 When running headed browser on system w/o display or from worker processes of the IDEs,
-run the MCP server from environment with the DISPLAY and pass the `--port` flag to enable SSE transport.
+run the MCP server from environment with the DISPLAY and pass the `--port` flag to enable HTTP transport.
 
 ```bash
 npx @playwright/mcp@latest --port 8931
 ```
 
-And then in MCP client config, set the `url` to the SSE endpoint:
+And then in MCP client config, set the `url` to the MCP endpoint:
 
 ```js
 {
   "mcpServers": {
     "playwright": {
-      "url": "http://localhost:8931/sse"
+      "url": "http://localhost:8931/mcp"
     }
   }
 }
 ```
 
+For legacy SSE transport support, you can use `/sse` instead of `/mcp` in the URL.
+
 <details>
 <summary><b>Docker</b></summary>
 

src/transport.ts

@@ -88,7 +88,14 @@ async function handleStreamable(server: Server, req: http.IncomingMessage, res:
       if (transport.sessionId)
         sessions.delete(transport.sessionId);
     };
-    await server.createConnection(transport);
+    const connection = await server.createConnection(transport);
+    // Ensure connection is closed when transport closes
+    transport.onclose = () => {
+      if (transport.sessionId)
+        sessions.delete(transport.sessionId);
+      // eslint-disable-next-line no-console
+      void connection.close().catch(e => console.error(e));
+    };
     await transport.handleRequest(req, res);
     return;
   }
@@ -115,10 +122,10 @@ export function startHttpTransport(httpServer: http.Server, mcpServer: Server) {
   const streamableSessions = new Map<string, StreamableHTTPServerTransport>();
   httpServer.on('request', async (req, res) => {
     const url = new URL(`http://localhost${req.url}`);
-    if (url.pathname.startsWith('/mcp'))
-      await handleStreamable(mcpServer, req, res, streamableSessions);
-    else
+    if (url.pathname.startsWith('/sse'))
       await handleSSE(mcpServer, req, res, url, sseSessions);
+    else
+      await handleStreamable(mcpServer, req, res, streamableSessions);
   });
   const url = httpAddressToString(httpServer.address());
   const message = [
@@ -127,11 +134,11 @@ export function startHttpTransport(httpServer: http.Server, mcpServer: Server) {
     JSON.stringify({
       'mcpServers': {
         'playwright': {
-          'url': `${url}/sse`
+          'url': `${url}/mcp`
         }
       }
     }, undefined, 2),
-    'If your client supports streamable HTTP, you can use the /mcp endpoint instead.',
+    'For legacy SSE transport support, you can use the /sse endpoint instead.',
   ].join('\n');
     // eslint-disable-next-line no-console
   console.error(message);

tests/http.spec.ts

@@ -66,15 +66,16 @@ const test = baseTest.extend<{ serverEndpoint: (options?: { args?: string[], noP
   },
 });
 
-test('sse transport', async ({ serverEndpoint }) => {
+test('http transport', async ({ serverEndpoint }) => {
   const { url } = await serverEndpoint();
-  const transport = new SSEClientTransport(url);
+  const transport = new StreamableHTTPClientTransport(new URL('/mcp', url));
   const client = new Client({ name: 'test', version: '1.0.0' });
   await client.connect(transport);
   await client.ping();
+  expect(transport.sessionId, 'has session support').toBeDefined();
 });
 
-test('sse transport (config)', async ({ serverEndpoint }) => {
+test('http transport (config)', async ({ serverEndpoint }) => {
   const config: Config = {
     server: {
       port: 0,
@@ -84,16 +85,16 @@ test('sse transport (config)', async ({ serverEndpoint }) => {
   await fs.promises.writeFile(configFile, JSON.stringify(config, null, 2));
 
   const { url } = await serverEndpoint({ noPort: true, args: ['--config=' + configFile] });
-  const transport = new SSEClientTransport(url);
+  const transport = new StreamableHTTPClientTransport(new URL('/mcp', url));
   const client = new Client({ name: 'test', version: '1.0.0' });
   await client.connect(transport);
   await client.ping();
 });
 
-test('sse transport browser lifecycle (isolated)', async ({ serverEndpoint, server }) => {
+test('http transport browser lifecycle (isolated)', async ({ serverEndpoint, server }) => {
   const { url, stderr } = await serverEndpoint({ args: ['--isolated'] });
 
-  const transport1 = new SSEClientTransport(url);
+  const transport1 = new StreamableHTTPClientTransport(new URL('/mcp', url));
   const client1 = new Client({ name: 'test', version: '1.0.0' });
   await client1.connect(transport1);
   await client1.callTool({
@@ -102,7 +103,7 @@ test('sse transport browser lifecycle (isolated)', async ({ serverEndpoint, serv
   });
   await client1.close();
 
-  const transport2 = new SSEClientTransport(url);
+  const transport2 = new StreamableHTTPClientTransport(new URL('/mcp', url));
   const client2 = new Client({ name: 'test', version: '1.0.0' });
   await client2.connect(transport2);
   await client2.callTool({
@@ -113,9 +114,6 @@ test('sse transport browser lifecycle (isolated)', async ({ serverEndpoint, serv
 
   await expect(async () => {
     const lines = stderr().split('\n');
-    expect(lines.filter(line => line.match(/create SSE session/)).length).toBe(2);
-    expect(lines.filter(line => line.match(/delete SSE session/)).length).toBe(2);
-
     expect(lines.filter(line => line.match(/create context/)).length).toBe(2);
     expect(lines.filter(line => line.match(/close context/)).length).toBe(2);
 
@@ -127,10 +125,10 @@ test('sse transport browser lifecycle (isolated)', async ({ serverEndpoint, serv
   }).toPass();
 });
 
-test('sse transport browser lifecycle (isolated, multiclient)', async ({ serverEndpoint, server }) => {
+test('http transport browser lifecycle (isolated, multiclient)', async ({ serverEndpoint, server }) => {
   const { url, stderr } = await serverEndpoint({ args: ['--isolated'] });
 
-  const transport1 = new SSEClientTransport(url);
+  const transport1 = new StreamableHTTPClientTransport(new URL('/mcp', url));
   const client1 = new Client({ name: 'test', version: '1.0.0' });
   await client1.connect(transport1);
   await client1.callTool({
@@ -138,7 +136,7 @@ test('sse transport browser lifecycle (isolated, multiclient)', async ({ serverE
     arguments: { url: server.HELLO_WORLD },
   });
 
-  const transport2 = new SSEClientTransport(url);
+  const transport2 = new StreamableHTTPClientTransport(new URL('/mcp', url));
   const client2 = new Client({ name: 'test', version: '1.0.0' });
   await client2.connect(transport2);
   await client2.callTool({
@@ -147,7 +145,7 @@ test('sse transport browser lifecycle (isolated, multiclient)', async ({ serverE
   });
   await client1.close();
 
-  const transport3 = new SSEClientTransport(url);
+  const transport3 = new StreamableHTTPClientTransport(new URL('/mcp', url));
   const client3 = new Client({ name: 'test', version: '1.0.0' });
   await client3.connect(transport3);
   await client3.callTool({
@@ -160,9 +158,6 @@ test('sse transport browser lifecycle (isolated, multiclient)', async ({ serverE
 
   await expect(async () => {
     const lines = stderr().split('\n');
-    expect(lines.filter(line => line.match(/create SSE session/)).length).toBe(3);
-    expect(lines.filter(line => line.match(/delete SSE session/)).length).toBe(3);
-
     expect(lines.filter(line => line.match(/create context/)).length).toBe(3);
     expect(lines.filter(line => line.match(/close context/)).length).toBe(3);
 
@@ -174,10 +169,10 @@ test('sse transport browser lifecycle (isolated, multiclient)', async ({ serverE
   }).toPass();
 });
 
-test('sse transport browser lifecycle (persistent)', async ({ serverEndpoint, server }) => {
+test('http transport browser lifecycle (persistent)', async ({ serverEndpoint, server }) => {
   const { url, stderr } = await serverEndpoint();
 
-  const transport1 = new SSEClientTransport(url);
+  const transport1 = new StreamableHTTPClientTransport(new URL('/mcp', url));
   const client1 = new Client({ name: 'test', version: '1.0.0' });
   await client1.connect(transport1);
   await client1.callTool({
@@ -186,7 +181,7 @@ test('sse transport browser lifecycle (persistent)', async ({ serverEndpoint, se
   });
   await client1.close();
 
-  const transport2 = new SSEClientTransport(url);
+  const transport2 = new StreamableHTTPClientTransport(new URL('/mcp', url));
   const client2 = new Client({ name: 'test', version: '1.0.0' });
   await client2.connect(transport2);
   await client2.callTool({
@@ -197,9 +192,6 @@ test('sse transport browser lifecycle (persistent)', async ({ serverEndpoint, se
 
   await expect(async () => {
     const lines = stderr().split('\n');
-    expect(lines.filter(line => line.match(/create SSE session/)).length).toBe(2);
-    expect(lines.filter(line => line.match(/delete SSE session/)).length).toBe(2);
-
     expect(lines.filter(line => line.match(/create context/)).length).toBe(2);
     expect(lines.filter(line => line.match(/close context/)).length).toBe(2);
 
@@ -211,10 +203,10 @@ test('sse transport browser lifecycle (persistent)', async ({ serverEndpoint, se
   }).toPass();
 });
 
-test('sse transport browser lifecycle (persistent, multiclient)', async ({ serverEndpoint, server }) => {
+test('http transport browser lifecycle (persistent, multiclient)', async ({ serverEndpoint, server }) => {
   const { url } = await serverEndpoint();
 
-  const transport1 = new SSEClientTransport(url);
+  const transport1 = new StreamableHTTPClientTransport(new URL('/mcp', url));
   const client1 = new Client({ name: 'test', version: '1.0.0' });
   await client1.connect(transport1);
   await client1.callTool({
@@ -222,7 +214,7 @@ test('sse transport browser lifecycle (persistent, multiclient)', async ({ serve
     arguments: { url: server.HELLO_WORLD },
   });
 
-  const transport2 = new SSEClientTransport(url);
+  const transport2 = new StreamableHTTPClientTransport(new URL('/mcp', url));
   const client2 = new Client({ name: 'test', version: '1.0.0' });
   await client2.connect(transport2);
   const response = await client2.callTool({
@@ -236,9 +228,17 @@ test('sse transport browser lifecycle (persistent, multiclient)', async ({ serve
   await client2.close();
 });
 
-test('streamable http transport', async ({ serverEndpoint }) => {
+test('sse transport', async ({ serverEndpoint }) => {
   const { url } = await serverEndpoint();
-  const transport = new StreamableHTTPClientTransport(new URL('/mcp', url));
+  const transport = new SSEClientTransport(new URL('/sse', url));
+  const client = new Client({ name: 'test', version: '1.0.0' });
+  await client.connect(transport);
+  await client.ping();
+});
+
+test('http transport (default)', async ({ serverEndpoint }) => {
+  const { url } = await serverEndpoint();
+  const transport = new StreamableHTTPClientTransport(url);
   const client = new Client({ name: 'test', version: '1.0.0' });
   await client.connect(transport);
   await client.ping();