websocket发送接收实时消息，前端后台，记不住就写下来。
后台
import java.io.IOException;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.ConcurrentMap;
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 com.alibaba.fastjson.JSON;
@ServerEndpoint("/weixin/start/{userid1}/{userid2}")
public class testWebsecket {
private static ConcurrentMap<String, Object> websocketMap = new ConcurrentHashMap<>();
//与某个客户端的连接会话，需要通过它来给客户端发送数据
private Session session;
/**
* 连接建立成功调用的方法
*
* @param session 可选的参数。session为与某个客户端的连接会话，需要通过它来给客户端发送数据
*/
@OnOpen
public void onOpen(@PathParam(value = "userid1") String userId1,@PathParam(value = "userid2") String userId2,Session session){
this.session = session;
websocketMap.put(userId1,this);
System.out.println(websocketMap.size());
}
/**
* 连接关闭调用的方法
*/
@OnClose
public void onClose(@PathParam(value = "userid1") String userid){
websocketMap.remove(userid);
}
/**
* 收到客户端消息后调用的方法
*
* @param message 客户端发送过来的消息
* @param session 可选的参数
* @throws IOException
*/
@OnMessage
public void onMessage(@PathParam(value = "userid1") String userid1,@PathParam(value = "userid2") String userId2,String message,Session session) throws IOException{
testWebsecket com = (testWebsecket) websocketMap.get(userId2);
com.alibaba.fastjson.JSONObject object = JSON.parseObject(message);
if(websocketMap.containsKey(userId2)){
com.session.getAsyncRemote().sendText(message);
}else{
this.session.getBasicRemote().sendText("用户未上线");
}
}
/**
* 发生错误时调用
*
* @param session
* @param error
*/
@OnError
public void onError(Session session, Throwable error) {
System.out.println("发生错误");
error.printStackTrace();
}
}
前端：两个一样的页面，参数不一样
①：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" >
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<title>testWebsecket</title>
</head>
<body>
<form>
<div id="messageSendContent"></div>
<textarea rows="5" cols="10" id="messageContent" placeholder="消息内容"></textarea>
<div οnclick="submit()">发送</div>
</form>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/layer/layer.js"></script>
<script>
var ws = null;
if('WebSocket' in window){
ws = new WebSocket("ws://localhost:8080/weixin/start/"+1+"/"+2);
}else{
layer.msg('升级浏览器')
}
ws.onerror = function(){
layer.msg('error')
}
ws.onopen = function(){
layer.msg('yes')
}
var div = document.getElementById("messageSendContent");
ws.onmessage = function(event){
console.log(event.data);
var span = document.createElement("div");
if(event.data=="用户未上线"){
layer.msg("用户未上线");
}else{
span.innerHTML = JSON.parse(event.data).data;
div.appendChild(span);
}
}
window.onbeforeunload = function(){
ws.close();
}
function submit(){
var data = {data:$('#messageContent').val()};
ws.send(JSON.stringify(data));
$('#messageContent').val("");
}
</script>
</html>
②：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" >
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<title>testWebsecket</title>
</head>
<body>
<form>
<div id="messageSendContent"></div>
<textarea rows="5" cols="10" id="messageContent" placeholder="消息内容"></textarea>
<div οnclick="submit()">发送</div>
</form>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/layer/layer.js"></script>
<script>
var ws = null;
if('WebSocket' in window){
ws = new WebSocket("ws://localhost:8080/weixin/start/"+2+"/"+1);
}else{
layer.msg('升级浏览器')
}
ws.onerror = function(){
layer.msg('error')
}
ws.onopen = function(){
layer.msg('yes')
}
var div = document.getElementById("messageSendContent");
ws.onmessage = function(event){
var span = document.createElement("div");
if(event.data=="用户未上线"){
layer.msg("用户未上线");
}else{
span.innerHTML = JSON.parse(event.data).data;
div.appendChild(span);
}
}
window.onbeforeunload = function(){
ws.close();
}
function submit(){
var data = {data:$('#messageContent').val()};
ws.send(JSON.stringify(data));
$('#messageContent').val("");
}
</script>
</html>
这是简单的实时发送接收消息，具体的业务还要细化，先做个记录拿来用，样式再改