Send Client Image with airSlate SignNow

Send customer image

hey everyone welcome to this video where i'm going to be using a socket connection to send an image from a client to a server i'm going to be using java swing for the simple gui but over here is the server so if i run it and i'm using intellij you can see it starts here then i run the client here is the image i want to send the image to server when i click this button it's waiting for the image so if i click it there you can see the image has been received by the server it was sent over a socket or tcp connection so to start this application the first thing i'm going to build is the client and so i'm going to create a java class i'm going to call it client i'm going to make the main method so i can run it and so to connect to a machine because we're going to be connecting to a server what we need to do is we need to make a socket connection basically what a socket does is it provides the communication mechanism between two computers using a transmission control protocol or tcp and so this is done with the socket class in java called socket and so a client program base what happens is it creates a socket on its end of communication and then attempts to connect to the server and what a stock connection really means is that two machines have information about their network location and the tcp port that they are communicating over and so then to communicate through these sockets you're going to be using streams for both input to both input and output data and so this is as i said this is represented with the socket class and we're just going to do new socket and so it takes two arguments because it needs their ip address which i'm going to be using localhost because it's my computer and then i'm just going to use my favorite port 1234 and then the next thing i'm going to do is i'm just going to print connected to server when this is completed and so as i stated earlier i'm going to be using java swing for the gui in this application and so whenever you create a gui with java swing you'll need a container for your application and basically this is a jframe and it's what holds all your elements be it text pictures and etc so i'm just going to create a new jframe sorry jframe and what goes in here is what you want to appear at the top of the image and so i'm going to have client at the top and then um so this is the container that i'm going to put all the elements in like the button that i click and um java swing applications can be run on any system that supports java so if you have java set you should be good and then i'm just going to set the size i'm going to set the size to 400 width by 400 height and then the next thing that's important to do is set default close operation i'm going to do jframe dot exit on close and what this basically means is that when you're in an application and you click that red x at the top right corner it will shut down the program as well as just closing the gui window now the next thing that we're going to be doing is we need to make the image that i want to send to the server and so what i'm going to be doing is i'm going to be using the image icon class and what an icon is in javascript is basically it's a fixed size picture so it's a picture that has a fixed size and you can make an icon with the image icon class or the image icon class makes an icon from a gif a jpeg or a png image and so i'm just going to do new image icon and one of the arguments it takes is the location of the file that you want to send and so this here is the location of the image that i'm going to be using you can see it's in my downloads folder and so basically what this does here is it's just going to create a fixed sized picture from this png image that i'm going to be placing in this java frame so now what i'm going to be using is a um jlabel which is something in java swing i'm going to name it jlobalpic and the jlabel can be used to house a short string or an image icon or even both and so what i'm going to be using it in this instance is i'm going to be holding the image icon so that it can be be displayed in the jframe and the next thing i'm going to be adding is a jbutton which is basically used to create a label button and then when you click on it you can perform an action you want so new j button i'm going to type it send image to server so when we click this button it's what we want to send when we want to send the picture to the server let me group these together and so when we add these actually to the jframe what we want to do is so this adds them and we also want to add some border layouts we want to decide where they get placed and we'll do center for the image and we'll do jframe.add button and we want to add that to the south or the bottom of the container and then of course to actually have the jframe shown we're going to do jframe.set visible to true and this will make it so you can actually see the jframe now that we've got everything showing we want to add some functionality and so what we're going to do is we're going to add functionality to the button and to do that use the method add on actionlistener and it takes the argument in actionlistener and so an action listener is basically notified whenever you click the button and that's why we pass it in here so when this button is clicked it'll notify us and then actionlistener is also a functional interface so what it means is it is a interface that contains one only one abstract method and so whatever we want to happen when we click this button we will type in the action performed method right here in this action perform method we want the image to be sent to the server the program is now going to get a little more interesting so what we're going to be working with here are now streams and so the first thing i'm going to do is i'm going to create an output stream equals new or sorry equals socket dot get output stream and so what a stream is it's basically an endless flow of data and a stream is always connected to a data source or a destination like a file a network connection or a memory buffer and here the source is our client socket and that's why we're getting the output stream from the socket and the destination will be the server socket where we will read the input from and this is because you can either read from a stream or write to a stream and what we're going to do with the input stream is you write to input you write to output streams and you read from input streams and so the output streams destination is where all the data written to the output stream will eventually end and so this will be the socket which is connected to localhost and 1234 this is where we will be writing everything and output stream is basically the base class for everything to do with output streams so now we're going to be using something to increase the efficiency of our application and what that is is we're going to be using a buffer so a buffered output stream it's a subclass of the output stream and so what it does is it wraps the output stream that we've made so this output stream that we got from the socket we're then going to wrap it in a buffer and what this means is that all bytes written to this buffered output stream will first get buffered inside an internal byte array and then they will all get flushed to this underlying output stream here when the buffer is full and flush basically just means emptying it out and here the client socket of course is our output stream so it'll empty it out to the output stream and it'll get sent to the server and what we want to send is the byte data of the image now we want to retrieve the image that is from the image icon that we have in java swing and so basically what an image is in java is it's a super class for all image classes that represent graphical images and the way to do that is we're going to do image equals image icon and get image so we return the image and now we can use this to send it as a buffered image which is a subclass of the image class so let's create the buffered image so buffered image name it buffered image and so what a buffered image is it's basically used to handle and manipulate image data and so it consists of a color model and a raster image of data so basically what it means is it describes an image with an accessible buffer of image data that you can manipulate and work with and so what a color model is exactly is it's an abstract class that encapsulates the methods for translating a pixel value to color components so like red green blue and also an alpha component where alpha component is um how opaque and images so zero meaning it's transparent and one meaning it's opaque and so this is because in order to render an image to the screen the pixel values must be converted into color and alpha components on the other hand the raster class what it does is it represents an a rectangular array of pixels and so what a raster basically it defines the pixels occupying a particular rectangle area on a of a plane a flat two-dimensional plane and so all buffered image objects have an upper left corner of zero zero which you can consider the start of the raster and so any raster used to construct enough a buffered image must therefore have a minimum x value of zero and a minimum y value of zero so now let's create this buffered image i'm going to do that i'm just going to do new buffered image see what arguments it takes it takes a width which i'm going to use the image because it's the image that we want to write to it i'm going to do image.get with and it wants a image observer i'm going to pass that as null and then it wants um then for the height i'm going to image.height once again pass null because we don't want to use an image observer and then i'm going to do the last thing is buffered image dot type in rgb so basically what an image observer is that you can pass into get with and get height is what it does is it basically tracks you can use it to track the loading or um yeah the loading of an image that you're sending over network and that's usually what it is used for we are not going to be using it in this case and also over here bufferedimage.type you're just setting the type of the image for its rgb values you can have rgb here which i know will give the buffer a black background but you can also use a rgb to give it a transparent background if you don't want it to be seen when the image is written into it now the class we're going to be working with is the graphics class and so graphics what it basically allows you to do is it allows you to draw things and what we're going to do is we're going to do get this graphics image from bufferedimage.creategraphics and so with graphics you can do things like you can draw an image which is what we're going to be doing you can draw a line you can draw a polygon so basically what it's done is used to draw stuff into the buffer and so right now our buffer is empty but we don't want it to be empty we want to draw an image into it and this is the image that we want to send and so each graphics object basically uses system resources that need to be released just like streams as well so but so what we're going to be doing is we'll do draw image the arguments it takes is first the image which we've named image and we'll just pass it like that then we're going to pass 0 for the x value 0 for the y value because we want it to be in the upper left corner of the raster and the image observer we're just going to do no which would be to like track it's loading progress and we're just not we're going to ignore that for now and now we're going to do graphics.dispose because we want to get free up those resources that we've been using now what we're going to be doing is what i would consider probably the most important line of code that we're going to be writing and so we're going to be using the image.io class and basically what it is it's a utility class that contains convenience method convenient methods for performing simple encoding and decoding so basically it's a class to convert information or data into a particular form that you want and so what it does is it writes whatever image we give to it to a specific stream and so what we want it to do is it writes a rendered image our rendered image is going to be our buffered image and then it takes the format so the format name is you can see up here we used a png so i'm going to type png and then the stream that we want to send it to and so we're going to send it to the buffered output stream that we made here which will then when it's full be flush the underlying socket output stream there which will end up at the server and so which thing you should notice though is that this class does not close the stream so we still need to do buffered output stream.close and we also need to close the socket as well and this will close closing the buffered output stream will also close the underlying output stream here and so we can release the resources that are not being used so this is it for the client the only thing that we need to do now is we need to add um our catch clauses and do our error collection so i'm going to do i think most of these are input output exceptions so if i just do a catchphrase here e dot print stretch stack trace um the error is because the action event is also titled e so let me just call it event which we're not going to be using anyway and then also we have this here i'm just going to add this to the method signature to make it easy but so this is the client that we've made so now we're going to be working on the server so now let's build the server and so this is a separate project in intellij this isn't the same one and so i'm just going to create another java class and i'm going to name it server and then let's add the main method so we can run it and so we're going to use j java swing again just to build everything so i'm just going to basically do what i did with the the client and just type in everything so here's just a quick run through of what i did is i made a jframe with the title server which will be at the top left corner i set the size to 400 by 400 pixels um the default close operation so if we exit out of the gui it also ends the program i've made a text label that will just say waiting for client i've added it to the frame which of course is the container and i made the second optional argument to borderlayout.south so it'll that means it'll be at the bottom of the jframe and then i've set the jframe to visible so it can be seen this program will be fairly similar to the client program except for one of the facts here is we're going to be using a server socket and we're going to name it just server socket equals new server socket and it'll be once again my favorite port one two three four and so this is basically um what this does is it wait server socket waits for requests to come in over the network and so it listens on the port number that you specify one two three four and we use this port because the client is going to be attempting to connect to this port and so we want to have the same port on the server and so the way to actually get a connection is we're going to make a socket object and we'll do server socket.accept and so what this does is it waits so it's a waiting method so it won't pass past here move past this line of code until there has been a connection and once there is a connection it returns it as a socket so that we can connect to the client because we know about that the client and the server communicate by writing to and reading from the socket or what in other words they write to an output stream and read from an input stream so because we have to talk with streams what we need to do is so stream represents an order stream of bytes and because we're going to be receiving data from the client we want to use an input stream so we're going to do input stream input stream equals socket.get input stream and so this is how we can read the information from the client and what they've sent and then to make it more efficient we're going to do a buffered input stream it's the same thing as on the client but instead of an output stream it's an input stream and we're going to pass the input stream in here so this basically once will have a buffer an internal buffer that will fill up with bytes and make the whole program more efficient so now here's arguably the most important line of code that we're going to be using and that's to actually retrieve the image that we want to display from the client and so to do that we're going to be using the utility class image.io again and we're going to using read and what we're going to be reading from of course is the input stream but we have wrapped that in a buffer so to make it more efficient so we're going to be reading from the buffered input stream and this will be the image that we actually want to display and so of course we know that this here does not actually close the stream so we have to explicitly close that because we're done with it which will also close the underlying input stream and then we also want to close the socket so close that and now we just need to add everything so we're going to do a label call it j label pick because this will house the picture that we want to have um and it takes a of course you know it takes an icon attack text or both so we're going to do an icon we're going to do new image icon and pass in the buffered image and next we want to change if you can remember we changed the text so what was it jlabel text we want to set that text when the image has been received to image received so that'll change the text up here from waiting for your image from client image received and now of course these wouldn't actually go into effect unless we added the actually added the picture to the jframe and then what we want to do is also change the layout let's put in the center so it'll be in the center of the gui just like it is in the client now let's finish off with just the error handling and luckily we don't have any anonymous classes like any other one so all we can do is just add this to the method signature and everything will be fine so this should be our final product so now we've got the server on this side and the client on this side and so all we have to do is we have to choose to run it from main so get the server started first so the client can actually connect to it then we run the client it should appear over here as well excellent so we have the send image to server button we have the image in the middle so when we click this it should end up over here and voila we got it here and it says image received alright thank you for watching