Hello and welcome to the Golang programming language course in the preview session, we could implement
the client there.
And in this session, we want to create a web client program so that we can run the client layer of
this project, both in the terminal end and event.
The LEP client program consists of two main parts and it's standard template and a JavaScript code.
Now it's time to implement the web client.
So first, go to Package Expeller and go to Bitso Get Folder right click on the client layer and create
a file name like index by Hitchin and extension.
Now let's start creating our template for this purpose.
First time estimate keyword and select handle current file and press enter.
Now we can see the program creates a basic template of the vet application that contains SDM and tag
hit tag body tag.
Our vet application is supposed to receive a message from the input and send a message to the server
with the push of a button and display it both on the web page and the other clients.
So we need a text filled component to receive the message from the user and the bottom component to
send it to the server for this purpose.
We use from input tag in a statement.
So go to the body tag and first define a form component for component and inform component.
We write our tax first, define a dive tag for set alignment drive.
Now, define this time for this time this time and set text line and said center value for these attribute
and set padding, top padding, top, for example, tawni pixels to many pieces and go to dive and write
our input.
Text input
first input is a text field, so type is text
and the
message, for example.
Go to the next line and find another tag improved.
This is a push button, so we said type of these input is a reset, for example, Typekit reset
and set a value, for example, to send data.
And so the idea for this, the idea, we said safe.
And set the background color for this button, so defined as tied attribute and select background color
and set, for example, line.
Or we could design our standard templates.
Now it's time to implement the JavaScript code for this purpose.
Go after closed form peg and define it.
Tag for implementing our code go after form defined as tag is create
and set out script in this OK in order to be able to execute our JavaScript code.
We need to enter the J Query CD and address into the program for this purpose.
Go to the Code J Query dot com site.
Time court got Jake weary.
That's Tom
Selleck last version, Jake Weary CBN.
Here is 3.3GHz and select minified version, OK?
In the pop up panel that opens, click on the comedy icon on the right side of the page to copy the
information the pop after the clipboard.
Now, go to a standard template and paste it in head touch.
Now go to her stack and paste here.
OK, now go to implement our JavaScript code.
Taconic Jones create two events server server, we need to create an object from the vet took that we
put inside a variable, so first define a variable name like Sujit by calling via keyword fat.
Some kids, he calls knew where Sujit.
Now said several of your allies argument for it, double quotation, mark and sit down with is just
127.0.0.1 as localhost column 885 passport numbers.
Now you have to say that when the user clicks on the send button, the information inside the text field
is sent as a message to the intricate web server.
Go to the next line, so be right.
The other sign calling button idea in this case is safe, sharp, safe or idea of the send button and
say when use it keeps the button, do something for you.
So calling click don't click.
And define a function for it function.
Now we need to implement this function.
First, we get the information inside the text field and place it inside a variable, such as a message
for do this calling VAL function on text field IED.
So we write that
message, for example, the equals diner sign.
Shocked, he said.
As I the art text field thought that.
Now we send the designer a message from the soldier to the soldier VVIP server before the Senate function.
So go to the next line socket.
Don't send.
Our message here is of extreme time why our server is ready to respond to JSON type requests, so we
have to convert our message to the message instruct format on the web to get server and then send it
to do this.
We use the extreme yify function of the JSON package, so we write JSON dot a string define
and cloning subject field of messages, selecting website server and initialize it.
But the message.
So calling subject
column mrJ now after each submit the button, the contents message inside the text with should be empty
and ready to receive the new message from the user.
To do this, we do this by calling get element by idea function.
From that, you saw the right document to get element by IED and that idea of text field.
Here is message.
Dot's value equals none, we were able to send our data to the vets to get server.
But if a message came from a server to the client, we should receive it and displayed to do this,
we do the following.
First, we con un message function of the circuit and initialize a method for its sole rights, which
adds that UN message
equals function
as input value.
You pass a variable, for example result.
Now we should implement the function body.
We need to receive the data sent from the server site here.
The data sent from the service site is an object of message, a structure in JSON format.
So we have to disagree as long as the sand data and set it into a variable.
So first, define a variable like message.
That message equals from Jason Pichai's putting parts function.
Jason.
Don't pass, and sin sends data and argument to it in this case, it is resolved.
Resolved dart daytime after the serialized data to messages throughout the fetch subject feel of it.
So we write Dot Subject Dot Subject, we need to display the receive message in the browser.
So to do this, we use the element and display each message in one line.
So do the following Go to the next line define the value that, for example, message element via message
element equals in culling.
Create element of document document, don't create elements and set DIFC.
OK, now we assign the content in the message variable to the created element.
So the right message element dot text content equals message.
Now we use the Puti print function to add the reserved message to the list of messages and display each
new message at the top of the list in the browser.
So before calling Prepend Function first, go to the original code and define a new divx tag for display
all messages.
So go to the four.
After this time, create a new guy.
Set a nice default, for example messages idea, he said.
Messages and set a style text alone attribute we said center and set a pattern for it.
For example, padding top 20 pixel.
And set a color.
And, for example, MedImmune, OK, reformat the call and save the project, go to the screen and continue
the calling prepend function, go to the next line.
So the right dollar sign cutting idea of the message is dire.
In this case, it is messages now Citi double quotation Shah or IED messages and invoking PD pin function,
PD Pen function and that message element as argument for it.
OK.
We also managed to create an implement of IT client in order not to prolong the time of decision.
We will finish it and we will continue the content in the next session.
Goodbye.