├── .editorconfig
├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
└── index.html
├── src
├── App.vue
├── components
│ ├── Handlers.vue
│ └── LogDisplay.vue
├── main.ts
├── shims-tsx.d.ts
├── shims-vue.d.ts
└── utils.ts
├── tsconfig.json
└── vue.config.js
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | trim_trailing_whitespace = true
5 | insert_final_newline = true
6 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /dist
4 |
5 |
6 | # local env files
7 | .env.local
8 | .env.*.local
9 |
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 |
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | *.sublime-project
25 | *.sublime-workspace
26 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # VueSSE Example App
2 |
3 | This app provides a debuggable example for how to use v2 of VueSSE.
4 |
5 | It comes with its own SSE server that sends out the time every second.
6 |
7 | The web interface renders colorized event data based on its event name.
8 |
9 | ## Running
10 | ```
11 | npm install
12 | npm run serve
13 | ```
14 |
--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | '@vue/cli-plugin-babel/preset'
4 | ]
5 | }
6 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-sse-example",
3 | "version": "0.1.0",
4 | "scripts": {
5 | "serve": "vue-cli-service serve",
6 | "build": "vue-cli-service build",
7 | "lint": "vue-cli-service lint"
8 | },
9 | "dependencies": {
10 | "core-js": "^3.6.5",
11 | "vue": "^2.6.11",
12 | "vue-sse": "^2.0.0"
13 | },
14 | "devDependencies": {
15 | "@typescript-eslint/eslint-plugin": "^2.33.0",
16 | "@typescript-eslint/parser": "^2.33.0",
17 | "@vue/cli-plugin-babel": "~4.5.0",
18 | "@vue/cli-plugin-eslint": "~4.5.0",
19 | "@vue/cli-plugin-typescript": "~4.5.0",
20 | "@vue/cli-service": "~4.5.0",
21 | "@vue/eslint-config-standard": "^5.1.2",
22 | "@vue/eslint-config-typescript": "^5.0.2",
23 | "eslint": "^6.7.2",
24 | "eslint-plugin-import": "^2.20.2",
25 | "eslint-plugin-node": "^11.1.0",
26 | "eslint-plugin-promise": "^4.2.1",
27 | "eslint-plugin-standard": "^4.0.0",
28 | "eslint-plugin-vue": "^6.2.2",
29 | "typescript": "~3.9.3",
30 | "vue-template-compiler": "^2.6.11"
31 | },
32 | "eslintConfig": {
33 | "root": true,
34 | "env": {
35 | "node": true
36 | },
37 | "extends": [
38 | "plugin:vue/essential",
39 | "@vue/standard",
40 | "@vue/typescript/recommended"
41 | ],
42 | "parserOptions": {
43 | "ecmaVersion": 2020
44 | },
45 | "rules": {}
46 | },
47 | "browserslist": [
48 | "> 1%",
49 | "last 2 versions",
50 | "not dead"
51 | ]
52 | }
53 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | VueSSE Example App
8 |
9 |
10 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
16 |
17 |
18 |
19 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
35 |
36 |
37 |
38 |
41 |
42 |
43 |
44 |
45 |
134 |
135 |
174 |
--------------------------------------------------------------------------------
/src/components/Handlers.vue:
--------------------------------------------------------------------------------
1 |
2 |
34 |
35 |
36 |
60 |
--------------------------------------------------------------------------------
/src/components/LogDisplay.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 | >
9 | {{ l[1] }}
10 |
11 |
12 |
13 |
14 |
35 |
36 |
59 |
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import VueSSE from 'vue-sse'
3 | import App from './App.vue'
4 |
5 | // Use VueSSE, including a polyfill for older browsers
6 | Vue.use(VueSSE, {
7 | polyfill: true
8 | })
9 |
10 | Vue.config.productionTip = false
11 |
12 | new Vue({
13 | render: h => h(App)
14 | }).$mount('#app')
15 |
--------------------------------------------------------------------------------
/src/shims-tsx.d.ts:
--------------------------------------------------------------------------------
1 | import Vue, { VNode } from 'vue'
2 |
3 | declare global {
4 | namespace JSX {
5 | // tslint:disable no-empty-interface
6 | interface Element extends VNode {}
7 | // tslint:disable no-empty-interface
8 | interface ElementClass extends Vue {}
9 | interface IntrinsicElements {
10 | [elem: string]: any;
11 | }
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 | import Vue from 'vue'
3 | export default Vue
4 | }
5 |
--------------------------------------------------------------------------------
/src/utils.ts:
--------------------------------------------------------------------------------
1 | export function now (): string {
2 | const d = new Date()
3 | const h = d.getHours()
4 | const m = d.getMinutes()
5 | const s = d.getSeconds()
6 |
7 | return `${h < 10 ? '0' + h : h}:${m < 10 ? '0' + m : m}:${s < 10 ? '0' + s : s}`
8 | }
9 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "esnext",
4 | "module": "esnext",
5 | "strict": true,
6 | "jsx": "preserve",
7 | "importHelpers": true,
8 | "moduleResolution": "node",
9 | "skipLibCheck": true,
10 | "esModuleInterop": true,
11 | "allowSyntheticDefaultImports": true,
12 | "sourceMap": true,
13 | "baseUrl": ".",
14 | "paths": {
15 | "@/*": [
16 | "src/*"
17 | ]
18 | },
19 | "lib": [
20 | "esnext",
21 | "dom",
22 | "dom.iterable",
23 | "scripthost"
24 | ]
25 | },
26 | "include": [
27 | "src/**/*.ts",
28 | "src/**/*.tsx",
29 | "src/**/*.vue",
30 | "tests/**/*.ts",
31 | "tests/**/*.tsx"
32 | ],
33 | "exclude": [
34 | "node_modules"
35 | ]
36 | }
37 |
--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | /*
2 | * This configuration is used to provide a mock SSE server to send requests to for testing.
3 | */
4 | const compression = require('compression')
5 |
6 | module.exports = {
7 | devServer: {
8 | before (app) {
9 | app.use(compression())
10 |
11 | app.get('/sse', (req, res) => {
12 | req.socket.setTimeout(0)
13 | req.socket.setNoDelay(true)
14 | req.socket.setKeepAlive(true)
15 | res.statusCode = 200
16 |
17 | res.setHeader('Content-Type', 'text/event-stream')
18 | res.setHeader('Cache-Control', 'no-cache')
19 |
20 | res.write('data: welcome!\n\n')
21 | res.flush()
22 |
23 | const timer = setInterval(function () {
24 | res.write(`event: time\ndata: ${new Date()}\n\n`)
25 |
26 | res.flush()
27 | }, 1000)
28 |
29 | res.on('close', function () {
30 | clearInterval(timer)
31 | })
32 | })
33 | }
34 | }
35 | }
36 |
--------------------------------------------------------------------------------