When I tried to access my locally created the HTTPS server using browser, the connection immediately dropped

Question

The server run into the errors but when I open the https://localhost:8080/ using the browser. As follow:

error: Uncaught (in promise) Http: error writing a body to connection: tls handshake eof: tls handshake eof
  for await (const req of httpConn) {
                   ^
    at async HttpConn.nextRequest (ext:deno_http/01_http.js:101:21)
    at async Object.next (ext:deno_http/01_http.js:184:24)
    at async handleConn (file:///Users/feiwu/Project/node/coding_and_nas/http/example/http.ts:24:20)

This is my code:

const cert = Deno.readTextFileSync('./cert.pem')
const key = Deno.readTextFileSync('./private.pem')

const listener = Deno.listenTls({
  cert,
  key,
  hostname: 'localhost',
  port: 8080,
})

console.log('Server running on https://localhost:8080/')

for await (const conn of listener) {
  handleConn(conn)
}

async function handleConn(conn: Deno.TlsConn) {
  const httpConn = Deno.serveHttp(conn)

  for await (const req of httpConn) {
    const url = new URL(req.request.url)
    if (url.pathname === '/favicon.ico') continue
    const path = url.pathname === '/' ? '/welcome.html' : url.pathname
    const ext = path.split('.').pop()

    const file = (await Deno.open(`./http/example${path}`)).readable

    let res: Response | null = null
    if (ext === 'html' || ext === 'css') res = resBuilder(file, `text/${ext}`)
    else if (ext === 'js') res = resBuilder(file, 'text/javascript')
    else if (ext === 'png' || ext === 'jpg' || ext === 'ico')
      res = resBuilder(file, `image/${ext}`)
    else res = resBuilder(file, '*/*')
    req.respondWith(res!)
  }
}

function resBuilder(data: ReadableStream<Uint8Array>, contentType: string) {
  return new Response(data, {
    headers: new Headers({ 'content-type': contentType }),
  })
}

I want the server wouldn't disconnect and allow me to trust the cert in the browser.