使用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<String, WebSocket> 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";
    }
}

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>chart</title>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div>
    <p th:text="${text}"></p>
</div>
</body>
</html>

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";
    }
}

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>chart</title>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div>
    <div class="panel panel-info">
        <div class="panel-heading">
            <h3 th:text="'您好！ ' + ${userName} + ' ,欢迎来到 simple 聊天室！'"></h3>
        </div>
        <div class="panel-body">
            下章节我们来写聊天的界面，如果你喜欢，觉得还不错，简书关注我，和我交流，一起成长！
        </div>
    </div>
</div>
</body>
</html>

添加bootstrap样式后的效果

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

最后编辑于：2019.04.29 15:56:31