使用webSocket实现页面快乐的聊天.No1

第一篇先说后台部分，我这里选择的是Java.使用IDEA新建的maven项目，springBoot + bootStrap + thymeleaf.

在搭建好的项目框架中，新建一个WebSocket.java,如下：

import org.slf4j.Logger;

import org.slf4j.LoggerFactory;

import org.springframework.stereotype.Component;

import javax.websocket.Session;

import javax.websocket.server.ServerEndpoint;

import java.util.Map;

import java.util.concurrent.ConcurrentHashMap;

@Component

@ServerEndpoint(value = "/webSocket/init")

public class WebSocket {

    private Logger logger = LoggerFactory.getLogger(this.getClass());

    /** * 在线人数 */

    private static int onlineNumber = 0;

    /** * 以用户的姓名为key，WebSocket为对象保存起来 */

    private static Map clients = new ConcurrentHashMap<>();

    /** * 会话 */

    private Session session;

    /** * 用户名称 */

    private String userId;

    /** * 对象用户名称 */

    private String otherId;

}

webSocket有很多事件，先写一个建立连接的方法，注解是@onOpen：

/**
     * 建立连接
     * @param session
     */
    @OnOpen
    public void onOpen(Session session)
    {
        String uuid = UuidCreater.newUuid();
        this.userId = uuid;
        this.session = session;
        onlineNumber++;
        logger.info("现在来连接的客户id："+session.getId()+"用户名："+ this.userId);
        logger.info("有新连接加入！ 当前在线人数" + onlineNumber);
        clients.put(this.session.getId(), this);
    }

我这里选用thymeleaf模板，先写一个chartController.java和chart.html看看访问怎么样：

@Controller
@RequestMapping("/chart")
public class ChartController {

    @RequestMapping("/index")
    public String chart(Model model){
        model.addAttribute("text","你们好，的朋友们!");
        return "socket/chart";
    }
}

thymeleaf效果

好像效果还不错，那么我们就可以在这个基础上写一个简单的页面啦。
修改一下刚才的chartController.java和chart.html，并简单的加上bootstrap的样式，试图让他们看起来没有那么糟糕。

@Controller
@RequestMapping("/chart")
public class ChartController {

    @RequestMapping("/index")
    public String chart(Model model){
        model.addAttribute("userName","乔治");
        return "socket/chart";
    }
}

    
    
    
    
    



    

        

            

        
        

            下章节我们来写聊天的界面，如果你喜欢，觉得还不错，关注我，和我交流，一起成长！
        
    

添加bootstrap样式后的效果

那么我们对于demo的要求其实并没有那么高，所以，又不是不能用。哈哈哈，好了这一章节就先到这里了，我们下一章节见。如果你觉得有那么一点启发，关注我，一起学习！