Commit code with double quotes instead of single quotes
This commit is contained in:
Dmitry Yankowski
@@ -2,12 +2,12 @@
|
||||
<div class="page">
|
||||
<section id="options">
|
||||
<input id="tab-one" type="radio" name="options" checked="checked" />
|
||||
<label for="tab-one">{{ $t('websocket') }}</label>
|
||||
<label for="tab-one">{{ $t("websocket") }}</label>
|
||||
<div class="tab">
|
||||
<pw-section class="blue" :label="$t('request')" ref="request">
|
||||
<ul>
|
||||
<li>
|
||||
<label for="url">{{ $t('url') }}</label>
|
||||
<label for="url">{{ $t("url") }}</label>
|
||||
<input
|
||||
id="url"
|
||||
type="url"
|
||||
@@ -20,10 +20,10 @@
|
||||
<li>
|
||||
<label for="connect" class="hide-on-small-screen"> </label>
|
||||
<button :disabled="!urlValid" id="connect" name="connect" @click="toggleConnection">
|
||||
{{ !connectionState ? $t('connect') : $t('disconnect') }}
|
||||
{{ !connectionState ? $t("connect") : $t("disconnect") }}
|
||||
<span>
|
||||
<i class="material-icons">
|
||||
{{ !connectionState ? 'sync' : 'sync_disabled' }}
|
||||
{{ !connectionState ? "sync" : "sync_disabled" }}
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
@@ -35,7 +35,7 @@
|
||||
<pw-section class="purple" :label="$t('communication')" id="response" ref="response">
|
||||
<ul>
|
||||
<li>
|
||||
<label for="log">{{ $t('log') }}</label>
|
||||
<label for="log">{{ $t("log") }}</label>
|
||||
<div id="log" name="log" class="log">
|
||||
<span v-if="communication.log">
|
||||
<span
|
||||
@@ -46,13 +46,13 @@
|
||||
}}{{ logEntry.payload }}</span
|
||||
>
|
||||
</span>
|
||||
<span v-else>{{ $t('waiting_for_connection') }}</span>
|
||||
<span v-else>{{ $t("waiting_for_connection") }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<label for="message">{{ $t('message') }}</label>
|
||||
<label for="message">{{ $t("message") }}</label>
|
||||
<input
|
||||
id="message"
|
||||
name="message"
|
||||
@@ -66,7 +66,7 @@
|
||||
<li>
|
||||
<label for="send" class="hide-on-small-screen"> </label>
|
||||
<button id="send" name="send" :disabled="!connectionState" @click="sendMessage">
|
||||
{{ $t('send') }}
|
||||
{{ $t("send") }}
|
||||
<span>
|
||||
<i class="material-icons">send</i>
|
||||
</span>
|
||||
@@ -77,12 +77,12 @@
|
||||
</pw-section>
|
||||
</div>
|
||||
<input id="tab-two" type="radio" name="options" />
|
||||
<label for="tab-two">{{ $t('sse') }}</label>
|
||||
<label for="tab-two">{{ $t("sse") }}</label>
|
||||
<div class="tab">
|
||||
<pw-section class="blue" :label="$t('request')" ref="request">
|
||||
<ul>
|
||||
<li>
|
||||
<label for="server">{{ $t('server') }}</label>
|
||||
<label for="server">{{ $t("server") }}</label>
|
||||
<input
|
||||
id="server"
|
||||
type="url"
|
||||
@@ -100,10 +100,10 @@
|
||||
name="start"
|
||||
@click="toggleSSEConnection"
|
||||
>
|
||||
{{ !connectionSSEState ? $t('start') : $t('stop') }}
|
||||
{{ !connectionSSEState ? $t("start") : $t("stop") }}
|
||||
<span>
|
||||
<i class="material-icons">
|
||||
{{ !connectionSSEState ? 'sync' : 'sync_disabled' }}
|
||||
{{ !connectionSSEState ? "sync" : "sync_disabled" }}
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
@@ -115,7 +115,7 @@
|
||||
<pw-section class="purple" :label="$t('communication')" id="response" ref="response">
|
||||
<ul>
|
||||
<li>
|
||||
<label for="log">{{ $t('events') }}</label>
|
||||
<label for="log">{{ $t("events") }}</label>
|
||||
<div id="log" name="log" class="log">
|
||||
<span v-if="events.log">
|
||||
<span
|
||||
@@ -126,7 +126,7 @@
|
||||
}}{{ logEntry.payload }}</span
|
||||
>
|
||||
</span>
|
||||
<span v-else>{{ $t('waiting_for_connection') }}</span>
|
||||
<span v-else>{{ $t("waiting_for_connection") }}</span>
|
||||
</div>
|
||||
<div id="result"></div>
|
||||
</li>
|
||||
@@ -151,7 +151,7 @@ div.log {
|
||||
&,
|
||||
span {
|
||||
font-size: 16px;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-family: "Roboto Mono", monospace;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@@ -167,29 +167,29 @@ div.log {
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
'pw-section': () => import('../components/section'),
|
||||
"pw-section": () => import("../components/section"),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
connectionState: false,
|
||||
url: 'wss://echo.websocket.org',
|
||||
url: "wss://echo.websocket.org",
|
||||
socket: null,
|
||||
communication: {
|
||||
log: null,
|
||||
input: '',
|
||||
input: "",
|
||||
},
|
||||
connectionSSEState: false,
|
||||
server: 'https://express-eventsource.herokuapp.com/events',
|
||||
server: "https://express-eventsource.herokuapp.com/events",
|
||||
sse: null,
|
||||
events: {
|
||||
log: null,
|
||||
input: '',
|
||||
input: "",
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
urlValid() {
|
||||
const protocol = '^(wss?:\\/\\/)?'
|
||||
const protocol = "^(wss?:\\/\\/)?"
|
||||
const validIP = new RegExp(
|
||||
`${protocol}(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]).){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$`
|
||||
)
|
||||
@@ -199,7 +199,7 @@ export default {
|
||||
return validIP.test(this.url) || validHostname.test(this.url)
|
||||
},
|
||||
serverValid() {
|
||||
const protocol = '^(https?:\\/\\/)?'
|
||||
const protocol = "^(https?:\\/\\/)?"
|
||||
const validIP = new RegExp(
|
||||
`${protocol}(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]).){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$`
|
||||
)
|
||||
@@ -219,9 +219,9 @@ export default {
|
||||
connect() {
|
||||
this.communication.log = [
|
||||
{
|
||||
payload: this.$t('connecting_to', { name: this.url }),
|
||||
source: 'info',
|
||||
color: 'var(--ac-color)',
|
||||
payload: this.$t("connecting_to", { name: this.url }),
|
||||
source: "info",
|
||||
color: "var(--ac-color)",
|
||||
},
|
||||
]
|
||||
try {
|
||||
@@ -230,14 +230,14 @@ export default {
|
||||
this.connectionState = true
|
||||
this.communication.log = [
|
||||
{
|
||||
payload: this.$t('connected_to', { name: this.url }),
|
||||
source: 'info',
|
||||
color: 'var(--ac-color)',
|
||||
payload: this.$t("connected_to", { name: this.url }),
|
||||
source: "info",
|
||||
color: "var(--ac-color)",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
},
|
||||
]
|
||||
this.$toast.success(this.$t('connected'), {
|
||||
icon: 'sync',
|
||||
this.$toast.success(this.$t("connected"), {
|
||||
icon: "sync",
|
||||
})
|
||||
}
|
||||
this.socket.onerror = event => {
|
||||
@@ -246,26 +246,26 @@ export default {
|
||||
this.socket.onclose = event => {
|
||||
this.connectionState = false
|
||||
this.communication.log.push({
|
||||
payload: this.$t('disconnected_from', { name: this.url }),
|
||||
source: 'info',
|
||||
color: '#ff5555',
|
||||
payload: this.$t("disconnected_from", { name: this.url }),
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
})
|
||||
this.$toast.error(this.$t('disconnected'), {
|
||||
icon: 'sync_disabled',
|
||||
this.$toast.error(this.$t("disconnected"), {
|
||||
icon: "sync_disabled",
|
||||
})
|
||||
}
|
||||
this.socket.onmessage = event => {
|
||||
this.communication.log.push({
|
||||
payload: event.data,
|
||||
source: 'server',
|
||||
source: "server",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
})
|
||||
}
|
||||
} catch (ex) {
|
||||
this.handleError(ex)
|
||||
this.$toast.error(this.$t('something_went_wrong'), {
|
||||
icon: 'error',
|
||||
this.$toast.error(this.$t("something_went_wrong"), {
|
||||
icon: "error",
|
||||
})
|
||||
}
|
||||
},
|
||||
@@ -276,16 +276,16 @@ export default {
|
||||
this.disconnect()
|
||||
this.connectionState = false
|
||||
this.communication.log.push({
|
||||
payload: this.$t('error_occurred'),
|
||||
source: 'info',
|
||||
color: '#ff5555',
|
||||
payload: this.$t("error_occurred"),
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
})
|
||||
if (error !== null)
|
||||
this.communication.log.push({
|
||||
payload: error,
|
||||
source: 'info',
|
||||
color: '#ff5555',
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
})
|
||||
},
|
||||
@@ -294,26 +294,26 @@ export default {
|
||||
this.socket.send(message)
|
||||
this.communication.log.push({
|
||||
payload: message,
|
||||
source: 'client',
|
||||
source: "client",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
})
|
||||
this.communication.input = ''
|
||||
this.communication.input = ""
|
||||
},
|
||||
collapse({ target }) {
|
||||
const el = target.parentNode.className
|
||||
document.getElementsByClassName(el)[0].classList.toggle('hidden')
|
||||
document.getElementsByClassName(el)[0].classList.toggle("hidden")
|
||||
},
|
||||
getSourcePrefix(source) {
|
||||
const sourceEmojis = {
|
||||
// Source used for info messages.
|
||||
info: '\tℹ️ [INFO]:\t',
|
||||
info: "\tℹ️ [INFO]:\t",
|
||||
// Source used for client to server messages.
|
||||
client: '\t👽 [SENT]:\t',
|
||||
client: "\t👽 [SENT]:\t",
|
||||
// Source used for server to client messages.
|
||||
server: '\t📥 [RECEIVED]:\t',
|
||||
server: "\t📥 [RECEIVED]:\t",
|
||||
}
|
||||
if (Object.keys(sourceEmojis).includes(source)) return sourceEmojis[source]
|
||||
return ''
|
||||
return ""
|
||||
},
|
||||
toggleSSEConnection() {
|
||||
// If it is connecting:
|
||||
@@ -324,26 +324,26 @@ export default {
|
||||
start() {
|
||||
this.events.log = [
|
||||
{
|
||||
payload: this.$t('connecting_to', { name: this.server }),
|
||||
source: 'info',
|
||||
color: 'var(--ac-color)',
|
||||
payload: this.$t("connecting_to", { name: this.server }),
|
||||
source: "info",
|
||||
color: "var(--ac-color)",
|
||||
},
|
||||
]
|
||||
if (typeof EventSource !== 'undefined') {
|
||||
if (typeof EventSource !== "undefined") {
|
||||
try {
|
||||
this.sse = new EventSource(this.server)
|
||||
this.sse.onopen = event => {
|
||||
this.connectionSSEState = true
|
||||
this.events.log = [
|
||||
{
|
||||
payload: this.$t('connected_to', { name: this.server }),
|
||||
source: 'info',
|
||||
color: 'var(--ac-color)',
|
||||
payload: this.$t("connected_to", { name: this.server }),
|
||||
source: "info",
|
||||
color: "var(--ac-color)",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
},
|
||||
]
|
||||
this.$toast.success(this.$t('connected'), {
|
||||
icon: 'sync',
|
||||
this.$toast.success(this.$t("connected"), {
|
||||
icon: "sync",
|
||||
})
|
||||
}
|
||||
this.sse.onerror = event => {
|
||||
@@ -352,34 +352,34 @@ export default {
|
||||
this.sse.onclose = event => {
|
||||
this.connectionSSEState = false
|
||||
this.events.log.push({
|
||||
payload: this.$t('disconnected_from', { name: this.server }),
|
||||
source: 'info',
|
||||
color: '#ff5555',
|
||||
payload: this.$t("disconnected_from", { name: this.server }),
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
})
|
||||
this.$toast.error(this.$t('disconnected'), {
|
||||
icon: 'sync_disabled',
|
||||
this.$toast.error(this.$t("disconnected"), {
|
||||
icon: "sync_disabled",
|
||||
})
|
||||
}
|
||||
this.sse.onmessage = event => {
|
||||
this.events.log.push({
|
||||
payload: event.data,
|
||||
source: 'server',
|
||||
source: "server",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
})
|
||||
}
|
||||
} catch (ex) {
|
||||
this.handleSSEError(ex)
|
||||
this.$toast.error(this.$t('something_went_wrong'), {
|
||||
icon: 'error',
|
||||
this.$toast.error(this.$t("something_went_wrong"), {
|
||||
icon: "error",
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.events.log = [
|
||||
{
|
||||
payload: this.$t('browser_support_sse'),
|
||||
source: 'info',
|
||||
color: '#ff5555',
|
||||
payload: this.$t("browser_support_sse"),
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
},
|
||||
]
|
||||
@@ -389,16 +389,16 @@ export default {
|
||||
this.stop()
|
||||
this.connectionSSEState = false
|
||||
this.events.log.push({
|
||||
payload: this.$t('error_occurred'),
|
||||
source: 'info',
|
||||
color: '#ff5555',
|
||||
payload: this.$t("error_occurred"),
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
})
|
||||
if (error !== null)
|
||||
this.events.log.push({
|
||||
payload: error,
|
||||
source: 'info',
|
||||
color: '#ff5555',
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
})
|
||||
},
|
||||
@@ -409,7 +409,7 @@ export default {
|
||||
},
|
||||
updated: function() {
|
||||
this.$nextTick(function() {
|
||||
const divLog = document.getElementById('log')
|
||||
const divLog = document.getElementById("log")
|
||||
divLog.scrollBy(0, divLog.scrollHeight + 100)
|
||||
})
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user