Skip to content

Commit

Permalink
Start WebSockets
Browse files Browse the repository at this point in the history
  • Loading branch information
@GregBrimble
GregBrimble committed May 19, 2020
1 parent f767360 commit 1941b76
Show file tree
Hide file tree
Showing 27 changed files with 1,793 additions and 5,542 deletions.
2 changes: 2 additions & 0 deletions .github/workflows/test.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ jobs:
fetch-depth: 1
- name: Install
run: npm ci
env:
GITHUB_TOKEN: ${{ github.token }}
- name: Lint
run: npm run lint
- name: Test
Expand Down
15 changes: 15 additions & 0 deletions packages/client/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions packages/client/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
"md5": "2.2.1",
"moment": "2.24.0",
"plotly.js": "1.54.1",
"pusher-js": "6.0.3",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-plotly.js": "2.4.0",
Expand Down
8 changes: 5 additions & 3 deletions packages/client/src/components/home/ExampleAnalytics.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@ export const ExampleAnalytics = () => (
data={[
{
x: [0, 0.25, 0.5, 0.75, 0.9, 0.99, 0.999, 1],
y: [380, 1054, 1535, 1843, 2303.4, 3113.2, 3638.56, 3815],
y: [380, 1054, 1535, 1843, 2303.4, 3113.2, 3638.56, 3815].map(
(y) => y / 1000
),
type: "scatter",
name: "success",
mode: "lines+markers",
Expand All @@ -15,7 +17,7 @@ export const ExampleAnalytics = () => (
},
{
x: [0, 0.25, 0.5, 0.75, 0.9, 0.99, 0.999, 1],
y: [201, 240.2, 609, 2800, 3732, 4678, 4800, 4900],
y: [201, 240.2, 609, 2800, 3732, 4678, 4800, 4900].map((y) => y / 1000),
type: "scatter",
name: "error",
mode: "lines+markers",
Expand All @@ -26,7 +28,7 @@ export const ExampleAnalytics = () => (
layout={{
yaxis: {
title: "CPU Time (ms)",
range: [0, 5000],
range: [0, 5],
},
xaxis: { title: "Quantile" },
showlegend: true,
Expand Down
2 changes: 1 addition & 1 deletion packages/client/src/components/home/ExamplePeek.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -260,7 +260,7 @@ const INITIAL_STATE = [

export const ExamplePeek = () => {
const newSize = (state: Location[]): Location[] => {
state[Math.round(state.length * Math.random()) - 1].size += 5;
state[Math.floor(state.length * Math.random())].size += 5;
return [...state];
};

Expand Down
40 changes: 21 additions & 19 deletions packages/client/src/components/workers/Analytics.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,14 +123,14 @@ const analyticsToSeries = (analytics: any, interval: string) => {
new Date(a.dimensions[interval]).getTime() -
new Date(b.dimensions[interval]).getTime()
)) {
min.y.push(analytic.min.cpuTime);
p25.y.push(analytic.quantiles.cpuTimeP25);
p50.y.push(analytic.quantiles.cpuTimeP50);
p75.y.push(analytic.quantiles.cpuTimeP75);
p90.y.push(analytic.quantiles.cpuTimeP90);
p99.y.push(analytic.quantiles.cpuTimeP99);
p999.y.push(analytic.quantiles.cpuTimeP999);
max.y.push(analytic.max.cpuTime);
min.y.push(analytic.min.cpuTime / 1000);
p25.y.push(analytic.quantiles.cpuTimeP25 / 1000);
p50.y.push(analytic.quantiles.cpuTimeP50 / 1000);
p75.y.push(analytic.quantiles.cpuTimeP75 / 1000);
p90.y.push(analytic.quantiles.cpuTimeP90 / 1000);
p99.y.push(analytic.quantiles.cpuTimeP99 / 1000);
p999.y.push(analytic.quantiles.cpuTimeP999 / 1000);
max.y.push(analytic.max.cpuTime / 1000);
errors.y.push(analytic.sum.errors);
requests.y.push(analytic.sum.requests);
subrequests.y.push(analytic.sum.subrequests);
Expand All @@ -149,9 +149,11 @@ const analyticsToSeries = (analytics: any, interval: string) => {

const maxTime = (analytics: any[]) =>
Math.ceil(
Math.max(...analytics.map((analytic: any) => analytic.max.cpuTime), 5000) /
1000.0
) * 1000;
Math.max(
...analytics.map((analytic: any) => analytic.max.cpuTime / 1000),
5
)
);

export const Analytics = () => {
const { workerID: scriptID, accountID } = useParams();
Expand Down Expand Up @@ -409,14 +411,14 @@ export const Analytics = () => {
const series = analytics.map((analytic: any) => ({
x: [0, 0.25, 0.5, 0.75, 0.9, 0.99, 0.999, 1],
y: [
analytic.min.cpuTime,
analytic.quantiles.cpuTimeP25,
analytic.quantiles.cpuTimeP50,
analytic.quantiles.cpuTimeP75,
analytic.quantiles.cpuTimeP90,
analytic.quantiles.cpuTimeP99,
analytic.quantiles.cpuTimeP999,
analytic.max.cpuTime,
analytic.min.cpuTime / 1000,
analytic.quantiles.cpuTimeP25 / 1000,
analytic.quantiles.cpuTimeP50 / 1000,
analytic.quantiles.cpuTimeP75 / 1000,
analytic.quantiles.cpuTimeP90 / 1000,
analytic.quantiles.cpuTimeP99 / 1000,
analytic.quantiles.cpuTimeP999 / 1000,
analytic.max.cpuTime / 1000,
],
type: "scatter",
name: analytic.dimensions.status,
Expand Down
9 changes: 9 additions & 0 deletions packages/client/src/components/workers/WebSockets.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,16 @@
import React from "react";
import { BigStatus } from "../BigStatus";
import { getPusher } from "../../pusher";
import { useParams } from "react-router-dom";

export const WebSockets = () => {
const { workerID: scriptID, accountID } = useParams();
const pusher = getPusher();
const channel = pusher.subscribe(
`private-WORKERS.SH_peek-${accountID}-${scriptID}`
);
channel.bind("newTailLog", (data: any) => alert(JSON.stringify(data)));
console.log(channel);
return (
<BigStatus
icon={<path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />}
Expand Down
92 changes: 75 additions & 17 deletions packages/client/src/pages/Home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,8 +94,9 @@ export const Home = () => {
Detailed reports
</h5>
<p className="mt-2 text-base leading-6 text-gray-500">
Get data you can't see anywhere else. View the CPU
time, errors and subrequests for your Workers.
Get data you can't see anywhere else. View the
complete breakdown of CPU time, errors and
subrequests for your Workers.
</p>
</div>
</div>
Expand All @@ -109,13 +110,11 @@ export const Home = () => {
stroke="currentColor"
fill="none"
viewBox="0 0 24 24"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M13 10V3L4 14h7v7l9-11h-7z"
/>
<path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
Expand All @@ -124,10 +123,10 @@ export const Home = () => {
Ready to use, right now
</h5>
<p className="mt-2 text-base leading-6 text-gray-500">
Cloudflare keeps logs for all Workers requests, so
unlike if you were to setup a traditional logging
service, weeks of historic data is available for you
to peruse, right now.
Cloudflare keeps three months of logs for all
Workers requests, so unlike if you were to setup a
traditional logging service, historic data is
available for you to peruse, right now.
</p>
</div>
</div>
Expand Down Expand Up @@ -180,6 +179,35 @@ export const Home = () => {
</div>
</div>
</li>

<li className="mt-10">
<div className="flex">
<div className="flex-shrink-0">
<div className="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
<svg
className="h-6 w-6"
stroke="currentColor"
fill="none"
viewBox="0 0 24 24"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
>
<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
</svg>
</div>
</div>
<div className="ml-4">
<h5 className="text-lg leading-6 font-medium text-gray-900">
High-quality templates
</h5>
<p className="mt-2 text-base leading-6 text-gray-500">
Use Cloudflare Workers immediately, by deploying
one of our templates.
</p>
</div>
</div>
</li>
</ul>
</div>

Expand Down Expand Up @@ -331,19 +359,49 @@ export const Home = () => {
</h5>
<p className="mt-2 text-base leading-6 text-gray-500">
No more polling and putting unnecessary load on
your Worker. Open a WebSocket and listen for
pushes direct from your API.
your Worker. Experience ~3x less latency by
opening a WebSocket and listening for pushes
direct from your API.
</p>
</div>
</div>
</li>
<li className="mt-10">
<div className="flex">
<div className="flex-shrink-0">
<div className="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
<svg
className="h-6 w-6"
stroke="currentColor"
fill="none"
viewBox="0 0 24 24"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
>
<path d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
</div>
</div>
<div className="ml-4">
<h5 className="text-lg leading-6 font-medium text-gray-900">
End-to-end encryption
</h5>
<p className="mt-2 text-base leading-6 text-gray-500">
Rest easy knowing workers.sh can't see the content
of your WebSocket messages. Securely send client
information, in full compliance with GDPR.
</p>
</div>
</div>
</li>
</ul>
</div>

<div className="mt-10 -mx-4 relative lg:mt-0 lg:col-start-1 text-center">
<span className="text-2xl font-extrabold">
<div className="mt-10 -mx-4 relative lg:mt-0 lg:col-start-1">
<div className="text-center text-2xl font-extrabold">
Coming soon!
</span>
</div>
</div>
</div>
</div>
Expand Down
20 changes: 20 additions & 0 deletions packages/client/src/pusher/index.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import Pusher from "pusher-js";
import { getSettings } from "../contexts/SettingsContext";

const APP_KEY = "2e0f85d5db4fe82c3479";
const APP_CLUSTER = "eu";

export const getPusher = () => {
const { token, emailAddress, key } = getSettings();

return new Pusher(APP_KEY, {
wsHost: `ws-${APP_CLUSTER}.workers.sh`,
auth: {
headers: {
Authorization: token ? `Bearer ${token}` : "",
"X-AUTH-EMAIL": emailAddress,
"X-AUTH-KEY": key,
},
},
});
};
2 changes: 1 addition & 1 deletion packages/server/.npmrc
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
@kv-orm:registry=https://npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
@kv-orm:registry=https://npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
Loading

0 comments on commit 1941b76

Please sign in to comment.