►
Description
SharePoint Patterns and Practices Web Cast with Frank Cornu (MVP) on building SharePoint Framework client-side web part with real time news feed. Implemented using SocketIO, Azure Logic App and Azure Servuce Bus Queues.
A
A
If
you
go
to
a
kms,
a
pond
PMP
you'll
enter
on
one
page,
which
will
do
the
introduction
for
you
open
source
and
ready
to
use
the
stuff
for
you
and
when
you
start
doing
our
customizations.
But
let's
move
into
the
today's
topic,
so
I'll
let
Frank
to
do
the
intros
and
start
working
under
the
actual
content.
What
are
we
gonna
say
today?
We
will
have
a
live
demo
as
well,
so
but
anyway,
Frank
take
it
away.
Yeah.
B
My
name
is
Frank
I'm
shopping
content
and
also
an
MVP,
and
today
I
will
show
you
a
little
sample.
I've
made
a
couple
of
weeks
ago
showing
how
to
be
on
the
real-time
news
feed
web
part
using
the
serpent
framework
as
geology,
caps
and
circuits
the
socket
IO.
So
you
can
see
the
Pinery.
This
is
what
I
will
show
you
today.
B
So
let's,
let's
start
with
the
with
the
architecture
of
the
of
this
distribution.
So
this
solution
is
actually
pretty
simple.
So
the
first
of
all,
the
the
first
step
is
I,
have
a
soft
point
from
aqueduct
that
connects
to
another
web
application
server.
In
this
case,
it
is
a
not
not
GS
application
server,
so
it
subscribes
to
two
event
to
the
socket
IO
server.
B
You
know
we
have
to
respect
to
prerequisites
to
connect
to
the
server
you
have
to
your
web.
Application
have
to
be
in
HTTP,
okay,
because
you
you
come,
you
come
from
a
shotgun
domain
in
HTTP,
so
you
have
to
respect
this
protocol
and
the
next
requirement
is
to
our
low
to
cross
domain
course
in
your
web
application.
Okay,
the
reason
I
use
another
web
application
it
is
is
because
these
two
requirements
are
by
default,
so
I
have
nothing
to
configure
in
India
developed.
B
So
the
next
step,
the
next
step
is
I,
have
a
sovereign
site
with
a
basic
different
list.
A
news
list:
okay
and
I
created
another
logic
F,
so
energy
gap
is
kind
of
a
workflow
okay
triggered
by
user,
and
when
a
new
item
is
created
in
the
English
shopkins
list,
we
fire
the
workflow
and
we
send
the
item
id
widget,
which
we've
done.
We
give
the
Denton
ID
and
we
send
it
to
a
service
abuse
vacuum.
B
Okay.
So
in
this
example,
this
is
not
a
real
real
time,
because
the
execution
depends
on
the
logic,
app
frequency,
the
execution
frequency,
so
I
will
show
you
later
what
it
means.
So
there's
your
veggie
caps
and
get
the
idea
of
the
create
the
newly
created
element,
tighten
and
send
it
to
the
to
a
service
service
best.
You,
okay,
here
I,
have
my
my
web
application
myself.
B
A
Friends,
let's,
let's,
let's
stay
on
this
slide,
just
to
kind
of
elaborate
that
slightly
so
the
two
basic
idea
is
that
somebody
is
setting
a
new
item
to
the
newest
list
and
you
want
to
reflect
that
chains
on
the
on
the
client-side
web
part
signed
right,
yeah
and,
and
it's
kind
of
a
well
I
would
say
it's
it's
almost
amusing
that
you
call
this
super
simple
and
it's
not
complex.
It's
fair!
A
B
I
can
I
can
say
you
can
just,
for
example,
replace
this
part
okay,
yeah
by
serpent
way,
books.
Okay,
this
part
is
just
to
catch
the
event
and
send
it
to
the
to
the
web
to
the
web
application.
But
you
you
can.
You
can
also
replace
this
part
by
by
a
serpent
web
books?
Okay,
but
you
have
to
code
to
code
to
do
this,
because
the
main
advantage
of
as
relative
is
to
is
really
simple
to
build.
I
will
show
you
right
after
it's
very
simple,
to
get
yeah.
A
B
A
B
B
To
catch
the
event
creation
event,
then
the
errors
that
is
best
cute
to
store
the
item
IDs
then
another
web
application
in
this
case
not
GS
application
and
the
last
part
is
the
the
socket
dot
IO,
which
is
a
JavaScript
library.
From
for
a
real-time
communication.
Okay,
the
contact
not
in
C
shop
will
be
would
be
a
signal.
F
yeah,
if
you
know
basically.
B
The
last
thing
I
wanted
to
mention
is
the
provisioning
part
for
the
shoppin
part.
It's
pretty
obvious.
You
I
used
the
PNP
women
for
listening
engine,
which
is
very,
very
cool,
really
cool
feature
and
for
the
SEO
path.
I
used
the
new
as
resource
manager,
which
is
a
simple
way
to
provision
things
automatically
programmatically
in
the
inner,
so
I
will
show
you
right
now.
B
So,
let's
move
to
the
to
the
demo,
so
I
will
show
you
the
the
final
wizard,
so
here
I
have
a
shot
complete
the
basic
supportive
with
few
items
and
and
the
other
side
excuse
me.
I
am
disappoint,
disappoint
webpart,
using
the
sovereign
frame
of
Kansas
lien
to
just
load
the
item
in
the
indexed,
so
I
will
create
a
new
item
in
the
list.
I
can
create
a
few
item
if
I
want.
B
But
just
be
careful
yeah,
it's
fast
yeah,
but
it's
pretty
I
would
say
random,
because
the
logic
at
execution
is
not
is
not
constant.
Okay
yeah,
so
you
have
to
be
careful
about
this.
I
will
show
you
right
after
so
when
I
click
it
just
like
this,
which
I
just
like,
for
example,
your
LinkedIn
feed
or
Facebook
feed.
You
do
have
to
press
f5
to
refresh
the
page.
You
are
the
notification
in
in
real-time,
without.
A
B
But
is
not
the
most
concrete
example
of
this
description,
but
think
about
an
inert
banner
or
something
like
that
in
the
rain
insurance
for,
for
instance,
it
totally
makes
sense
in
this
this
kind
of
situation.
So
this
is
the
the
behavior.
So
let's,
let's
see
the
to
be
behind
these
things?
What's
what's
going
on
so
I
will
show
you
first,
the
serpent
framework
code,
so
I
have
a
simple,
simple
word:
pot,
yeah.
B
Actually,
using
the
socket
IO
library
is
very,
very
simple:
you
just
have
to
get
the
right
NPM
package
here
so
use
the
the
client,
the
client
package
of
sockets
here,
and
what
you
have
to
do
is
just
to
put
the
correct
server
URL
in
so
in
this
case,
this
is
my
server
application.
Okay,
so
you
are
just
to
do
one
line
to
connect
to
your
server.
Then
you
subscribe
to
to
an
event
in
this
case.
B
B
B
Too
far
for
this
component,
so
it's
a
really
really
really
simple
to
use.
So
so
this
is
for
the
for
the
client
for
the
client
part
I
would
say
the
word
part.
I
will
not
detail
all
the
under
code,
because
it's
not
very
important
here
and
we
switch
to
the
to
the
server
code.
So
I'm
a
solution.
I
have
a
saga
yeah,
the
GS
fighter,
which
is
a
not
GS
v,
a
very
simple
server.
So
you
see
the
the
the
role
of
the
of
this
server
is
just
to
listen.
B
B
Set
interval
method,
air,
okay,
so
when
I
receive
a
message
in
this
case
in
the
news,
Q
I
just
broadcast
to
all
my
subscriber
and
you
can
see,
this
is
the
same
event
name
as
the
the
previous
one
in
the
serpent
with
that
so
I
just
broadcast
to
all
my
subscribers.
The
there
is
a
new
message
and
I
as
a
parameter.
I
pass
the
content
amid
the
content
of
the
message
that.
A
B
Javascript
library
and
the
reason
is,
it's
very
simple:
to
actually
to
implement
few
lines
of
code,
and
are
you
done
so?
This
is
the
password
for
the
km
code
and
the
son
of
God
okay.
So
it's
really
really
simple.
By
the
way
I
asked
or
the
the
Azure
service
was
actually
in
the
multiplication
of
settings,
so
just
just
Wednesday
now
I
will
switch
to
the
to
the
Asia
environment
so
in
the
Asia,
but
I
have
a
resource
resource
group.
Here,
a
dedicated
resource
group
and
the
first
resource
is
my
my
Dragic
app.
B
B
B
A
But
but
technically
what
you
could
do
so
I'm
just
speculating
on
the
additional
usage
scenario,
so
you
could
actually
bypass,
for
example,
the
message
or
a
title,
and
then
that
would
be
kind
of
a
notified.
You
could
notify
that
in
the
UI
saying
hey,
you
have
a
new
message
which
is
with
the
title
of
following,
so
it
would
be
kind
of
the
whatever
the
Outlook
notifications.
If
they
use
me,
get
buy-in.
B
B
B
30
bucks,
yes,
you're
right,
you
can,
you
can
pass
a
lot
of
properties.
Is
you
have
your
only
property?
You
you?
You
want
here,
yeah,
so
very
simple.
Work
from
you
see
two
actions
and
then
the
next
part
is
the
service
bus.
So
the
service
bus
is
pretty
simple.
It
just
took
you
so
to
connect
to
a
service,
but
there
is
no
authentication
for
the
photo
connection.
B
B
B
For
the
causes,
yes,
the
logic,
app
service
birth,
the
replication,
just
one
thing,
I
told
you
earlier
about
the
provisioning
stuff.
Okay,
you
see,
yeah
I
am
all
my
resources
in
the
same
group
within
the
same
location,
okay
and
our
I
can
do
that
is
by
using
the
other
resource
manager.
So
on
Asia
you
can
provision
automatically
a
lot
of
resources
they
uses
in
the
automation
script,
for
example,
if
I
want
to
provision
manage
programmatically
and
just
speak
on
my
new
teacher
and
say
yet
show
me
the
automation
script
and
you
will
see.
B
B
Can
show
you
the
the
final
distance
file?
Okay,
the
deployment
is
done
using
persistence,
idea
which,
which
is
the
automation,
script?
Okay,
and
you
can
pass
parameter
to
the
to
this
fight
so,
for
example,
the
queue
named
and
services
namespace
logic,
app
name,
and
so
on
and
provisioned
things
automatically
to
provision
the
rights
values,
because
it
can
be
very
complicated
to
build
this
kind
of
a
fight.
You
can
use
a
tool
called
as
resource
Explorer,
okay
and
with
the
tool
you
can
see
all
the
parameter
of
you
as
your
subscription.
B
Okay,
for
example,
if
I
want
to
provision
the
logic
app,
just
I
just
go
to
the
to
this
URL,
and
then
we
see
all
the
time
itself.
Okay,
so
I
will
see
the
end
the
recurrence,
and
so
are
the
frequency
three
seconds,
the
same
missiles
of
zone
of
my
service,
birds,
etc,
etc,
etc.
So
this
is
a
simple
way
to
provisions
being
automatically
within
a
within
Asia
yeah.
A
B
A
We
Frank
before
we
go
back
on
the
presentation.
Can
we
still
kibosh
or
canister
the
logic
app
configuration
because
one
what
I
wanted
to
kind
of
a
pin
point?
So
we
started
the
presentation
for
my
architectural
design
perspective
in
this
case.
Yes,
you
created
the
stuff
using
the
the
logic
amp
and
in
the
logic
camp.
Let's
say
one
of
maybe
two
challenges
might
be
that
you
need
to
define
the
URL
of
the
site
explicitly
the
when
a
new
item
has
been
created
and
that
you
can
certainly
parameterize
that
within
the.
A
But
if
you
would
replace
that
is
the
logic
gap
within
web
hook.
You
could
actually
subscribe
that
webhook
towards
multiple
URLs
and
multiple
sharepoint
sites
and
all
of
that
yeah.
It
would
be
much
more
complex
to
set
up
no
doubt
because
this
is
really
really
easy
to
set
up.
But
it's
an
alternative
path
to
the
exact
same
end.
Result.
A
Other
yep
I
think
we
we
went
through
the
whole
design
quite
nicely
and
I
I
really
think
this
is
a
great
great,
great
demo
and
a
sample
showing
multiple
aspects
of
SharePoint
Online.
So
in
the
context
of
SharePoint
framework,
so
right
now
the
SharePoint
framework
is
dependent
on
those
webparts
to
be
natively
on
the
pages,
so
the
web
part
would
be
there.
You
would
get
notifications,
maybe
in
the
future
we
have
alternative
ways
of
implementing
or
we
will
have,
and
we've
gone
public
with
that
one
in
ignite.
A
So
whenever
we
get
additional
script,
let's
say
customization
options
for
sharepoint
online.
You
can
implement
similar
kind
of
socket
IO
based
implementations
for
the
notifications
for
the
alerts,
like
you
were
saying
as
well.
It's
a
really
really
interesting
scenario
and
I
really
liked
the
simplicity
of
the
noches
app
as
well.
That
was
surprisingly
simple.
Let's
put
it
this
once,
but
I
think
that
sums
up
the
webcast
for
this
time.
A
So
thank
you,
Frank
for
create
sample
and
and
great
presentation
as
well
walking
through
how
it
actually
built-
and
it's
actually
pretty
interesting
how
simple
it
is
in
the
end,
when
you
understand
the
bits
and
pieces
when
you
have
a
look
on
the
architectural
UI,
it's
like
hey.
This
is
not
simple,
but
then,
when
you
go
through
then
one
by
one,
it
actually
makes
a
lot
of
sense,
but
I
think
that's
it.
We'll
come
up
with
a
new
BMP
webcast
sooner
or
later,
and
thank
you
Frank
for
more
time
for.