Netty+SpringBoot+FastDFS+Html5 to Realize Chat App Details

Keywords: Java Front-end Database github Netty

Netty+SpringBoot+FastDFS+Html5 implements chat App. Project introduction.
Netty+SpringBoot+FastDFS+Html5 implements chat App. Project github link.
Complete code for this chapter


This section focuses on user information processing in Chat App PigChat and related operations of file server FastDFS.


It contains the following contents:

(1) Registration and login functions

(2) Configuration of File Server

(3) Upload user's Avatar

(4) Setting User Nicknames

(5) Generation and Upload of User Two-Dimensional Code


Registration and login functions

Customize a tool class IMoocJSONResult, which is the data structure of the back-end response front-end.
It contains the following three attributes:

    // Response to business status
    private Integer status;
    // Response message
    private String msg;
    // Data in response
    private Object data;

Provide methods for error response and normal response:

    public static IMoocJSONResult ok(Object data) {
        return new IMoocJSONResult(data);
    }

    public static IMoocJSONResult ok() {
        return new IMoocJSONResult(null);
    }
    
    public static IMoocJSONResult errorMsg(String msg) {
        return new IMoocJSONResult(500, msg, null);
    }
    
    public static IMoocJSONResult errorMap(Object data) {
        return new IMoocJSONResult(501, "error", data);
    }
    
    public static IMoocJSONResult errorTokenMsg(String msg) {
        return new IMoocJSONResult(502, msg, null);
    }
    
    public static IMoocJSONResult errorException(String msg) {
        return new IMoocJSONResult(555, msg, null);
    }

Create the corresponding pojo package and mapper package according to the tables built by the database. Details of database table building

Create the UserController method and write to the registOrLogin interface that registers for login processing.
[0] The front-end passes in the Users object, and first determines whether the front-end passes in the Users object is empty.
[1] The query UsernameIsExist method of userService is then used to query the database according to the incoming user name.
[1.1] Log in if the user exists. Use the queryUserForLogin method of userService to judge whether the user name passed in from the front-end matches the password. If the matching occurs, the login will succeed, otherwise the login will fail.
[1.2] If the user does not exist, it registers by memory. Users objects are constructed according to the information from the front end and saveUser of userService is saved in the database.
[2] Finally, the UsersVO object is constructed and returned to the front end.
Note: Passwords need to be encrypted using the MD5 tool class before being saved to the database.

    /**
     * @Description: User registration/login
     */
    @PostMapping("/registOrLogin")
    public IMoocJSONResult registOrLogin(@RequestBody Users user) throws Exception {
        
        // 0. Judge that username and password cannot be empty
        if (StringUtils.isBlank(user.getUsername()) 
                || StringUtils.isBlank(user.getPassword())) {
            return IMoocJSONResult.errorMsg("User name or password cannot be empty...");
        }
        
        // 1. Determine whether the username exists, log in if it exists, and register if it does not.
        boolean usernameIsExist = userService.queryUsernameIsExist(user.getUsername());
        Users userResult = null;
        if (usernameIsExist) {
            // 1.1 login
            userResult = userService.queryUserForLogin(user.getUsername(), 
                                    MD5Utils.getMD5Str(user.getPassword()));
            if (userResult == null) {
                return IMoocJSONResult.errorMsg("Username or password incorrect..."); 
            }
        } else {
            // 1.2 registration
            user.setNickname(user.getUsername());
            user.setFaceImage("");
            user.setFaceImageBig("");
            user.setPassword(MD5Utils.getMD5Str(user.getPassword()));
            userResult = userService.saveUser(user);
        }
        // 2. Constructing UsersVO objects
        UsersVO userVO = new UsersVO();
        BeanUtils.copyProperties(userResult, userVO);
        
        return IMoocJSONResult.ok(userVO);
    }


Configuration of File Server

After configuring the file server FastDFS in linux, the following configuration needs to be added to the project:

(1) Create Fastdfs Importer in the same directory as Application

package com.imooc;

import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.EnableMBeanExport;
import org.springframework.context.annotation.Import;
import org.springframework.jmx.support.RegistrationPolicy;

import com.github.tobato.fastdfs.FdfsClientConfig;

/**
 * Import FastDFS-Client components
 * 
 * @author tobato
 *
 */
@Configuration
@Import(FdfsClientConfig.class)
// Solving the problem of jmx re-registration bean s
@EnableMBeanExport(registration = RegistrationPolicy.IGNORE_EXISTING)
public class FastdfsImporter {
    // Importing Dependent Components
}

(2) Add the following configuration in application.properties:

fdfs.soTimeout=1501
fdfs.connectTimeout=601
fdfs.thumbImage.width=80
fdfs.thumbImage.height=80
# 192.168.1.70 is the ip address of the Linux virtual machine
fdfs.trackerList[0]=192.168.1.70:22122

Start the service command:

/usr/bin/fdfs_trackerd /etc/fdfs/tracker.conf
/usr/bin/fdfs_storaged /etc/fdfs/storage.conf

#View service startup (port 23000/22122)
netstat -lnp |grep fdfs
cd /usr/local/nginx/sbin
./nginx


Upload user profile

Add uploadFaceBase64 interface to UserController to upload user profile.

[1] The front-end passes in the UserBO object, first obtains the base64 string from the front-end, and saves the file object locally through the base64ToFile method of FileUtils.
[2] The file object is converted into MultipartFile and uploaded to the file server fastDFS by uploadBase64 method of fastDFSClient. The path returned by the server is printed out. We can access the picture through this path.
[3] The path of the thumbnail is obtained by cutting the path returned.
[4] Update user profile information in database.

    /**
     * @Description: Upload user profile
     */
    @PostMapping("/uploadFaceBase64")
    public IMoocJSONResult uploadFaceBase64(@RequestBody UsersBO userBO) throws Exception {
        
        // 1. Get the base64 string passed from the front end, then convert it to a file object and upload it.
        String base64Data = userBO.getFaceData();
            // The path of storing pictures locally  
        String userFacePath = "C:\\" + userBO.getUserId() + "userface64.png";
        FileUtils.base64ToFile(userFacePath, base64Data);
        
        // 2. Upload files to fastdfs
        MultipartFile faceFile = FileUtils.fileToMultipart(userFacePath);
        String url = fastDFSClient.uploadBase64(faceFile);
        System.out.println(url);
        
//        "dhawuidhwaiuh3u89u98432.png"
//        "dhawuidhwaiuh3u89u98432_80x80.png"
        
        // 3. url to get thumbnails
        String thump = "_80x80.";
        String arr[] = url.split("\\.");
        String thumpImgUrl = arr[0] + thump + arr[1];
        
        // 4. Update user profile
        Users user = new Users();
        user.setId(userBO.getUserId());
        user.setFaceImage(thumpImgUrl);
        user.setFaceImageBig(url);
        
        Users result = userService.updateUserInfo(user);
        
        return IMoocJSONResult.ok(result);
    }


Setting User Nicknames

Add the setNickname interface that sets the user nickname in UserController.

    /**
     * @Description: Setting User Nicknames
     */
    @PostMapping("/setNickname")
    public IMoocJSONResult setNickname(@RequestBody UsersBO userBO) throws Exception {
        
        Users user = new Users();
        user.setId(userBO.getUserId());
        user.setNickname(userBO.getNickname());
        
        Users result = userService.updateUserInfo(user);
        
        return IMoocJSONResult.ok(result);
    }


Generation and Upload of User Two-Dimensional Code

Introducing Tool Classes and Components into UserService Impl

    //Two-Dimensional Code Tool Class
     @Autowired
    private QRCodeUtils qrCodeUtils;
    //Upload files to components required by fsatDFS
    @Autowired
    private FastDFSClient fastDFSClient;

In the saveUser method of UserService Impl to save user information, it is necessary to generate a unique two-dimensional code for each user.

[1] createQRCode method of qrCodeUtils, a two-dimensional code tool, is used to generate a unique two-dimensional code for each user. The first parameter is the path of storing the generated two-dimensional code, the second parameter is the information stored in the two-dimensional code, and then the file is converted into a MultipartFile object to facilitate uploading operation.
[2] The upload QRCode method of fastDFSClient uploads the two-dimensional code image to the file server.

    @Transactional(propagation = Propagation.REQUIRED)
    @Override
    public Users saveUser(Users user) {
        //Generate a unique id
        String userId = sid.nextShort();
        
        // 1. Generate a unique two-dimensional code for each user
            //Local paths for storing generated two-dimensional coded pictures  
        String qrCodePath = "C://user" + userId + "qrcode.png";
        // Information obtained after scanning two-dimensional codes: zhuzhu_qrcode:[username]
        qrCodeUtils.createQRCode(qrCodePath, "zhuzhu_qrcode:" + user.getUsername());
        MultipartFile qrCodeFile = FileUtils.fileToMultipart(qrCodePath);
        
           //2. Upload files
        String qrCodeUrl = "";
        try {
            qrCodeUrl = fastDFSClient.uploadQRCode(qrCodeFile);
        } catch (IOException e) {
            e.printStackTrace();
        }
        user.setQrcode(qrCodeUrl);
        
        user.setId(userId);
        userMapper.insert(user);
        
        return user;
    }

Posted by freephoneid on Fri, 15 Feb 2019 02:15:19 -0800