您的位置：首页 > Web前端 > HTML5

H5 WebSocket实现简单的实时通信

2017-04-30 16:14 603 查看

1.界面开发:index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>websocket web</title>
<meta http-equiv="content-Type" content="text/html;charset=utf-8" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css" />
<!-- JQuery and Bootstrap JS -->
<script src="JS/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- personal JS -->
<script src="JS/myindex.js" charset="utf-8"></script>
</head>
<body>
<div class="container">
<div class="input-group" style="margin:10% auto;">
<input type="text" id="msg" class="form-control" placeholder="input message" />
<div class="input-group-btn btn-group-md">
<button type="button" id="send" class="btn btn-default btn-md">发送</button>
</div>
</div>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">信息记录</div>
<div class="panel-body">
</div>
</div>
</div>
</div>
</body>
</html>

2.JS脚本设计 JS/myindex.js

$(function(){
//创建WebSocket对象
var url = "ws://localhost:8080/socketweb/server";
var ws = "";
$.fn.createws = function(){
if('WebSocket' in window){
ws = new WebSocket(url);
}
else if('MozWebSocket' in window){
ws = new MozWebSocket(url);
}
ws.onopen = function(){
console.log("已经打开了websocket连接，可以进行实时通信了");
};
ws.onmessage = function(e){
console.log("接受到来自服务器端的数据:"+e.data);
if(e.data == "close"){
//这里要注意onclose的第一个参数必须是1000或者3000—4999
ws.onclose(1000,"服务器通知关闭");
}
else{
$(".panel-body").append("<p>"+e.data"+"</p>");
}
}；
ws.onerror = function(e){
console.log("websocket连接错误"+e.error);
ws.close(3000,"websocket连接异常导致的关闭");
};
ws.onclose = function(e){
console.log("websocket关闭连接:"+e.error);
};
};
$.fn.createws();
/**
*为按钮添加发送信息事件
**/
$("#send").click(function(){
ws.send($("#msg").val());
$("#msg").val("");
});
});

3.服务器端java代码:ChatServer.java

@ServerEndpoint(value="/server")
public class ChatServer{

private static int count = 0;
@OnOpen
public void open(){
System.out.println("有客户端进行连接");
}

@OnMessage
public void message(String message,Session session){
System.out.println("客户端发送数据 -> "+message);
session.getBasicRemote().sendText(message);
count++;
if(count == 10){
System.out.println("发送的数据超过了十次，服务器告诉客户端关闭连接");
count = 0;
session.getBasicRemote().sendText(message);
}
}

@OnClose
public void close()
System.out.println("有客户端关闭了连接");
}
}

小贴士

这里的代码都是直接手打的，因此如果有什么错误可以评论，我来帮你解决，谢谢

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航