一、Server层
代码层次图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/21833382c83f82e8d6be2951403937a8.png)
注意:端口号要一致9090
DL.java
public class DL {
private DL(){
this.ol=new HashMap<String,Vector<Session>>();
this.ol.put("123", new Vector<Session>());
}
private static DL d;
public static synchronized DL getdl(){
if (d==null){
d=new DL();
}
return d;
}
private Map<String,Vector<Session>> ol;
public synchronized int jiaru(String qid,Session s){
Vector<Session> v1=this.ol.get(qid);
if (v1==null){
return -1;
}else {
Boolean a=v1.add(s);
if (a){
for (int i=0;i<v1.size();i++){
Session s1=v1.get(i);
try {
s1.getBasicRemote().sendText("user");
} catch (Exception e) {
e.printStackTrace();
}
}
return 1;
}else {
return 0;
}
}
}
public synchronized void sendall(String qid,String msg){
Vector<Session> v2=this.ol.get(qid);
for (int i = 0; i < v2.size(); i++) {
Session s2=v2.get(i);
try {
s2.getBasicRemote().sendText("user:"+msg);
} catch (Exception e) {
e.printStackTrace();
}
}
}
}
WSServer.java
@ServerEndpoint("/wohenshuai")
public class WSServer {
@OnOpen
public void abc(Session s){
System.out.println("新得连接");
DL d=DL.getdl();
d.jiaru("123", s);
}
@OnMessage
public void bcd(Session s,String msg){
DL d=DL.getdl();
d.sendall("123", msg);
}
@OnError
public void cde(Throwable e){
}
@OnClose
public void def(){
}
}
HelloServlet.java
@WebServlet(name = "helloServlet", value = "/hello-servlet")
public class HelloServlet extends HttpServlet {
private String message;
public void init() {
message = "Hello World!";
}
public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.println("<html><body>");
out.println("<h1>" + message + "</h1>");
out.println("</body></html>");
}
public void destroy() {
}
}
二、主页
模板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var w;
function init(){
w=new WebSocket("ws://localhost:9090/qunliao/wohenshuai");
w.onopen=function(){
};
w.onmessage=function(){
};
w.onerror=function(){
};
w.onclose=function(){
};
document.getElementById("d1").innerText="aaaa";
}
</script>
</head>
<body onload="init()">
<div id="d1"></div>
</body>
</html>
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var w;
function init(){
w=new WebSocket("ws://localhost:9090/qunliao/wohenshuai");
w.onopen=function(){
};
w.onmessage=function(e){
var s1=e.data;
if(s1.indexOf(":")>=0){
document.getElementById("dleft").innerHTML+=e.data+"<br/>";
}else{
document.getElementById("dright").innerHTML+=e.data+"<br/>";
}
};
w.onerror=function(){
};
w.onclose=function(){
};
}
function abcd(){
var a=document.getElementById("t1").value;
w.send(a);
document.getElementById("t1").value="";
}
</script>
</head>
<body onload="init()">
<div style="width: 70%;margin: 0 auto;height: 800px;">
<div style="float: left;width: 79%;height: 800px;">
<div id="dleft" style="margin-top: 5px;width: 100%;height: 700px;overflow: auto;border: solid 1px;">
</div>
<div style="margin-top: 5px;width: 100%;height: 70px;">
<div style="float: left;width: 80%;height: 70px;">
<input id="t1" type="text" style="width: 100%;margin-top: 30px;" />
</div>
<div style="float: right;width: 19%;height: 170px;">
<button style="margin-top: 30px;margin-left: 15px;" onclick="abcd()">发送</button>
</div>
</div>
</div>
<div id="dright" style="float: right;width: 19%;height: 800px;border: solid 1px;">
</div>
</div>
</body>
</html>
三、work.js:
work111.js
var list=[];
var j={
id:0,
p1:""
};
var w;
onconnect=function(e){
var port=e.ports[0];
port.addEventListener('message',function(e){
if(e.data.id){
var j2=Object.create(j,{
id:{
writeable:true,
value:j1.id
},
p1:{
writeable:true,
value:port
}
});
var b1=true;
for (var i = 0; i < list.length; i++) {
var j1=list[i];
if(j1.id==e.data.id){
b1=false;
list.splice(i,1,j2);
break;
}
}
if(b1){
list.push(j2);
}
}else{
}
});
port.start();
};
function lianjie(){
w=new WebSocket("ws://localhost:9090/qunliao/wohenshuai");
w.onopen=function{
};
w.onmessage-function(e){
var s1=e.data;
if(s1.indexOf(":")>=0){
document.getElementById("dleft").innerHTML+=e.data+<br/>;
}else{
document.getElementById("dright").innerHTML+=e.data+<br/>;
}
};
w.onerror=function(){
};
w.onclose=function(){
};
}
lianjie();
work123.js
var list=[];
var j={
id:0,
p1:""
}
onconnect=function(e){
var port=e.ports[0];
port.addEventListener('message',function(e){
if(e.data.id){
for (var i = 0; i < list.length; i++) {
var j1=list[i];
if(j1.id==e.data.id){
var j2=Object.create(j,{
id:{
writeable:true,
value:j1.id
},
p1:{
writeable:true,
value:port
}
});
list.splice(i,1,j2);
break;
}
}
}else{
}
});
port.start();
};
四、实现效果图:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/bff6a281ded16ea065205f8e44018009.png)
五、网页获取该电脑的ip地址:
getip.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<script type="text/javascript">
document.write(returnCitySN["cip"]+','+returnCitySN["cname"]);
</script>
</head>
<body>
</body>
</html>
效果图:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/aa64193d301799f973e057848468eed5.png)