ASP. SignalR with Layim, easy to implement the website customer service chat Room (vii) text, annex message (2016-05-05-12:13)

The previous article introduced the process of adding friends, here no longer repeat, but before the chat can only send ordinary text, then this chapter teaches you how to implement send attachments and picture messages. Let's analyze the function first:

• Send pictures, attachments, need to implement the ability to upload pictures and attachments.
• TextArea cannot display picture, so need to do picture conversion
• After you receive the message, you need to convert the picture back to the original picture
• Attachment Special style Handling

Then we first implement the file upload function, because the use of MVC, simply do a no-refresh without progress bar upload, so the pictures and files need a little bit, otherwise the user experience is poor. I use Jquery.form.js implementation form submission file, backstage with httppostedfilebase receive file files, and then save. Finally returns the new path and name of the file. Look at the background code: (A very simple file upload code, did not do too much processing, note to create a new upload folder)

  PublicJsonresult uploadfile (httppostedfilebase file,intUserid=0)        {            if(File! =NULL&& file. ContentLength >0)            {                stringFileExtension =path.getextension (file. FileName).                Tolowerinvariant (); stringFileName =Guid.NewGuid ().                ToString (); stringFullfilename =string. Format ("{0}{1}", FileName, fileextension); stringOldfilename =path.getfilename (file.                FileName); stringFilesavepath =string. Format ("{0}{1}", Server.MapPath ("/upload/"), fullfilename); stringURL ="/upload/"+Fullfilename; File.                SaveAs (Filesavepath); BOOLIsimg =fileextension.isimage (fileextension); if(UserID >0) {userbll.updateuserphoto (URL, userid); }                returnJson (New{url = URL, name = oldfilename, ext = fileextension, name1 = fullfilename, t = isimg?"img":"file"}, Jsonrequestbehavior.denyget); }            returnJson ("", Jsonrequestbehavior.denyget); }

Let's take a look. If the file upload succeeds, the JSON returned:

Ext: File suffix, Name: File name1: File New name t:img/file URL: File path

After uploading the file, you will be shown in the chat input box with a special flag. We can simply assign a value. The effect is as follows:

Then click Send the time to add what logic, that is, the picture related information sent to the server, print the message JSON sent:

Take note of the two red-framed places, in fact, my approach is very simple, when the message received, I replaced the URL name, as well as splicing the IMG tag can be. After receiving the message, the code is processed as follows:

  　　　　　　 //images as image array files for attachment array content as the original messageLog.handlemessage =function(content, images, files) {//handling Alternate Picture messages                if(Images && images.length > 0) {                     for(vari = 0; i < images.length; i++) {content= Content.replace (Images[i].name, ' ); }                }                //Handling Replacement Attachment messages                if(Files && files.length > 0) {                     for(vari = 0; i < files.length; i++) {                        varext = Files[i].name.split ('. ') [1]; Ext= Ext.substr (0, Ext.length-1); varimg = ' ; Content= Content.replace (Files[i].name, ' <a href= "' + Files[i].url + '" > ' + img + ' + files[i].name + ' </a> ')); }                 }                returncontent; }

After the message is processed, the content of the chat message display box is a live picture and an attachment. Accessories Click to download Oh. However, in order to keep the historical record unaffected, remember to store attachments or image message JSON in a database for easy conversion.

Here's a summary: If you need to send a message with pictures and attachments, the first thing to do is upload the image or file to the server. Then the equivalent is to send the path to the other side, show. Because the message display itself is HTML so, the picture is nothing more than an IMG tag. More content will not repeat, detailed demo:

　　 https://github.com/fanpan26/LayIM_SignalR_Chat Remember to give a star oh.

ASP. SignalR and Layim, easy to implement website customer service chat Room (vii) text, attachment message (2016-05-05 12:13)