1。后端代码
package test.conntroller.socket;
import java.util.HashMap;
import java.util.HashSet;
import java.util.Random;
import java.util.Set;
import java.util.UUID;
import java.util.concurrent.CopyOnWriteArraySet;
import javax.annotation.PostConstruct;
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Component;
@ServerEndpoint(value="/webSocket/{nickname}") //webSocket连接点映射
@Component
public class MyWebSocket {
@Autowired
private JdbcTemplate jdbc;
private static JdbcTemplate jdbcs;
//存储每个客户端对应的MyWebSocket对象
private static CopyOnWriteArraySet<MyWebSocket>webSocketSets = new CopyOnWriteArraySet<MyWebSocket>();
private Session session; //当前会话的session
private static String nickname;
//解决spring注入不上问题
@PostConstruct
public void init(){
jdbcs=jdbc;
}
/**
* 成功建立连接的方法
* */
@OnOpen
public void onOpen(Session session,@PathParam("nickname")String nickname){
createUser(nickname);
this.nickname=nickname;
this.session=session;
webSocketSet.add(this);
System.err.println(this);
System.out.println(session);
//this.session.getAsyncRemote().sendText(nickname+"上线了"+"当前在线人数为"+webSocketSet.size()+"人");
for (MyWebSocket myWebSocket : webSocketSet) {
if(myWebSocket==this){
session.getAsyncRemote().sendText(nickname+"连接成功"+"当前在线人数为"+webSocketSet.size()+"人");
}else
session.getAsyncRemote().sendText(nickname+"上线了"+"当前在线人数为"+webSocketSet.size()+"人");
}
}
private void createUser(String nickname2) {
// TODO Auto-generated method stub
String uuid = UUID.randomUUID().toString();
this.jdbcs.update("insert into demo(id,name)values(?,?)",new Object[]{uuid,nickname2});
}
/**
* 连接关闭的方法
* *
*/
@OnClose
public void onClose(Session session){
webSocketSet.remove(this);
}
/**
* 接收客户端消息后调用的方法
* *
*/
@OnMessage
public void onMessage(String message,Session session,@PathParam("nickname")String nickname){
broadcast(message,nickname);
}
private void broadcast(String message,String nickname) {
// TODO Auto-generated method stub
for (MyWebSocket myWebSocket : webSocketSet) {
if(myWebSocket==this){
session.getAsyncRemote().sendText("<span style=\"color:red;float:right\">"+message+":"+nickname+"</span>");
}else{
session.getAsyncRemote().sendText(nickname+":"+message);
}
}
}
/**
*发生错误的方法
* *
*/
@OnError
public void onError(Session session,Throwable error){
System.out.println("发生错误");
error.printStackTrace();
}
}
2.前端代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Insert title here</title>
<style>
#message{
margin-top:20px;
border:1px solid gray;
padding:20px;
}
input{
text-align:center;
}
</style>
</head>
<body>
<button onclick="conectWebSocket()">连接WebSocket</button>
<button onclick="closeWebSocket()">断开连接</button>
<br></br>
消息:<input type="text" id="text" />
<button onclick="send()">发送消息</button>
<div id="message" style="width: 500px;height: 500px;overflow-y:scroll">
</div>
<script type="text/javascript">
//连接对象
var websocket = null;
var nickname = null;
function conectWebSocket(){
nickname = document.getElementById("nickname").value;
if(nickname == ''){
alert("请输入昵称");
return;
}
//判断当前的浏览器是否支持websocket.
if("WebSocket" in window){
websocket = new WebSocket("ws://127.0.0.1:8081/webSocket/"+nickname);
}else{
alert("不支持");
return false;
}
//连接成功的方法.
websocket.onopen = function(event){
setMessgeHtml("连接成功");
}
//连接关闭.
websocket.onclose = function(event){
setMessgeHtml("连接关闭");
}
//连接异常.
websocket.onerror = function(event){
setMessgeHtml("连接异常");
}
websocket.onmessage = function(event){
setMessgeHtml(event.data);
}
}
function setMessgeHtml(msg){
var message = document.getElementById("message");
message.innerHTML += msg+"<br/>";
}
/**
发送消息.
*/
function send(){
var message = document.getElementById("text").value;
document.getElementById("text").value='';
websocket.send(message);//将json对象转换为json字符串.
}
</script>
</body>
</html>