使用webSocket实现页面快乐的聊天.No2
2019-05-07 本文已影响1人
苏笙甦
第二篇来写一些页面逻辑，上一篇写了一个简单的页面。现在修改一下，使更符合实际的业务场景。大致的思路应该是，注册→用户登录→聊天场景。
在这里我们省去注册步骤，因为注册需要结合业务，权限等，那我们先做个简单的登录页面index.html：
<!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 style="padding: 100px 100px 10px;">
<div>
<p>输入用户名进入聊天室</p>
</div>
<form class="bs-example bs-example-form" role="form" th:action="@{init}">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" id="userName" name="userName">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">
Go!
</button>
</span>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
看一下页面效果：
index.html
紧接着根据登录后跳转聊天页面的场景，修改ChartController.java：
@Controller
@RequestMapping("/webSocket")
public class ChartController {
@RequestMapping(value = "/init")
public String chart(String userName,Model model){
model.addAttribute("userName",userName);
return "socket/chart";
}
@RequestMapping("/index")
public String index(){
return "socket/index";
}
}
很明显，我们的思路是让index.html提交的用户名值传递到chart.html:
index.html
ChartController.java
chart.html
