第一篇先说后台部分，我这里选择的是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的要求其实并没有那么高，所以，又不是不能用。哈哈哈，好了这一章节就先到这里了，我们下一章节见。如果你觉得有那么一点启发，关注我，一起学习！
网友评论