How to fix EventSource onmessage not working in JavaScript All in One

发布时间 2023-10-23 22:48:42作者: xgqfrms

How to fix EventSource onmessage not working in JavaScript All in One

SSE: Server-Sent Events / 服务端推送

error ❌

window.addEventListener(`load`, (e) => {
  console.log(`page loaded ✅`);
  if (!!window.EventSource) {
    const img = document.querySelector(`#sse`);
    const source = new EventSource('http://localhost:3000/sse');
    source.onopen = (event) => {
      console.log(`✅ Connection to server opened.`, event);
    };
    source.onmessage = (event) => {
      const data = event.data;
      console.log(`? data =`, data)
      // img.src = `data:image/jpg;base64,${data}`;
      // img.src = `data:image/png;base64,${data}`;
      img.src = `${data}`;
    };
    // source.addEventListener(`message`, (e) => {
    //   const data = e.data;
    //   console.log(`data =`, data)
    //   img.src = `data:image/png;base64,${data}`;
    // }, false);
    source.onerror = (err) => {
      console.log(`❌ EventSource failed.`, err);
      // setTimeout(() => {
      //   console.log(`⚠️ After 3 seconds, auto close connection!`);
      //   source.close();
      // }, 3000);
    };
  } else {
    console.log(`Your browser doesn't support SSE ❌`);
  }
});

image

solution


demos

(? 反爬虫测试!打击盗版⚠️)如果你看到这个信息, 说明这是一篇剽窃的文章,请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章!

Node.js Buffer.from


import fs from 'node:fs';

type Filename = string;
type ImageType = 'png' | 'jpg' | 'jpeg' | 'gif' | 'webp';
type Base64String = `data:image/${ImageType};base64,${string}`;

const convertImageToBase64URL = (filename: Filename, imageType: ImageType = 'png'): Base64String => {
  try {
    const buffer = fs.readFileSync(filename);
    const base64String = Buffer.from(buffer).toString('base64');
    // console.log(`base64String`, base64String.slice(0, 100));
    return `data:image/${imageType};base64,${base64String}`;
  } catch (error) {
    throw new Error(`file ${filename} no exist ❌`)
  }
}

export {
  convertImageToBase64URL,
};

// test cases
const ok = convertImageToBase64URL("./public/test.png");
const err = convertImageToBase64URL();
/* 

Expected 1-2 arguments, but got 0.ts(2554)
An argument for 'filename' was not provided.
const convertImageToBase64URL: (filename: Filename, imageType?: ImageType) => Base64String

*/

https://www.cnblogs.com/xgqfrms/p/17357737.html

refs

https://stackoverflow.com/questions/28673371/eventsource-onmessage-is-not-working-where-onopen-and-onerror-works-proper

https://javascript.info/server-sent-events

https://developer.mozilla.org/en-US/docs/Web/API/EventSource/message_event



©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!

原创文章,版权所有©️xgqfrms, 禁止转载 ?️,侵权必究⚠️!