test/eventSource/scratch.html - master - kopython/_hyperscript

test/eventSource/scratch.html
117 строк3 KB
Deniz Akşimşek
Add .editorconfig and format everything (everything)
27 май 2021, 19:44
27 май 2021, 19:44061681f
<!html>
<html lang="en">
	<head>
		<link
			rel="stylesheet"
			href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
		/>
	</head>
	<body style="padding: 20px; font-family: sans-serif">
		<script src="../../src/lib/core.js"></script>
		<script src="../../src/lib/web.js"></script>
		<script src="../../src/lib/eventsource.js"></script>

		<em>Server Sent Events Playground</em>
		<hr />
		<script type="text/hyperscript">

			 eventsource StaticEventSource from "http://localhost/users.json"
			     on message
			         put it into #StaticDiv
			     end
			 end

			 eventsource DynamicEventSource

			     on open
			         log "connected"
			     end

			     on close
			         log "disconnect"
			     end

			     on error
			         log "error"
			     end

			     on First as string
			         put it into #FirstDiv
			     end

			     on WithNumber1 as string
			         put it into #SecondDiv
			     end

			     on WithColon:2 as string
			         put it into #ThirdDiv
			     end

			     on WithDash-3 as string
			         put it into #FourthDiv
			     end

			     on "InQuotes" as string
			         put it into #FifthDiv
			     end


			     on AsObject as json
			         put it.name into #name
			         put it.username into #username
			         put it.email into #email
			     end

			 end

			on First from DynamicEventSource log "Received event in external script"
		</script>

		<div>
			<input
				type="text"
				id="url"
				value="http://localhost/users.json?types=First,WithNumber1,WithColon:2,WithDash-3,InQuotes,AsObject"
				style="width: 800px"
			/>
			<button
				script="on click set #url.value to 'http://localhost/users.json?types=First,WithNumber1,WithColon:2,WithDash-3,InQuotes,AsObject'"
			>
				Reset</button
			><br />
			<button
				script="on click call DynamicEventSource.open(#url.value) then log 'connected'"
			>
				Connect
			</button>
			<button
				script="on click call DynamicEventSource.close() then log 'closed'"
			>
				Close
			</button>
		</div>

		<h3>Static Channel</h3>
		<div id="StaticDiv">Waiting...</div>

		<h3>First Channel</h3>
		<div id="FirstDiv">Waiting...</div>

		<h3>Second Channel</h3>
		<div id="SecondDiv">Waiting...</div>

		<h3>Third Channel</h3>
		<div id="ThirdDiv">Waiting...</div>

		<h3>Fourth Channel</h3>
		<div id="FourthDiv">Waiting...</div>

		<h3>Fifth Channel</h3>
		<div id="FifthDiv">Waiting...</div>

		<h3>As JSON</h3>
		<div>Name: <span id="name">...</span></div>
		<div>Username: <span id="username">...</span></div>
		<div>Email: <span id="email"></span></div>
	</body>
</html>