首页 > 其他分享 >一实例从WebSocket入门至精通

一实例从WebSocket入门至精通

时间：2023-01-16 09:44:05浏览次数：40  
标签：function websocket 入门 session 实例 WebSocket message 连接 客户端

主要是客户端的进化（环境 jdk1.7以上 tomcat 7.34以上 ）

 

1、服务器端

package com;


import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;

import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

//该注解用来指定一个URI，客户端可以通过这个URI来连接到WebSocket。类似Servlet的注解mapping。无需在web.xml中配置。
@ServerEndpoint("/chat")
public class MyWebSocket {
//静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
private static int onlineCount = 0;

//concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话，可以使用Map来存放，其中Key可以为用户标识
private static CopyOnWriteArraySet<MyWebSocket> webSocketSet = new CopyOnWriteArraySet<MyWebSocket>();

//与某个客户端的连接会话，需要通过它来给客户端发送数据
private Session session;

/**
* 连接建立成功调用的方法
* @param session 可选的参数。session为与某个客户端的连接会话，需要通过它来给客户端发送数据
*/
@OnOpen
public void onOpen(Session session){
this.session = session;
webSocketSet.add(this); //加入set中
addOnlineCount(); //在线数加1
System.out.println("有新连接加入！当前在线人数为" + getOnlineCount());
}

/**
* 连接关闭调用的方法
*/
@OnClose
public void onClose(){
webSocketSet.remove(this); //从set中删除
subOnlineCount(); //在线数减1
System.out.println("有一连接关闭！当前在线人数为" + getOnlineCount());
}

/**
* 收到客户端消息后调用的方法
* @param message 客户端发送过来的消息
* @param session 可选的参数
*/
@OnMessage
public void onMessage(String message, Session session) {
System.out.println("来自客户端的消息:" + message);

//群发消息
for(MyWebSocket item: webSocketSet){
try {
item.sendMessage(message);
} catch (IOException e) {
e.printStackTrace();
continue;
}
}
}

/**
* 发生错误时调用
* @param session
* @param error
*/
@OnError
public void one rror(Session session, Throwable error){
System.out.println("发生错误");
error.printStackTrace();
}

/**
* 这个方法与上面几个方法不一样。没有用注解，是根据自己需要添加的方法。
* @param message
* @throws IOException
*/
public void sendMessage(String message) throws IOException{
this.session.getBasicRemote().sendText(message);
//this.session.getAsyncRemote().sendText(message);
}

public static synchronized int getOnlineCount() {
return onlineCount;
}

public static synchronized void addOnlineCount() {
MyWebSocket.onlineCount++;
}

public static synchronized void subOnlineCount() {
MyWebSocket.onlineCount--;
}
}

 

2.客户端

A、最简单的客户端（一客户端发送信息，其他客户端以Text显示信息）

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>My WebSocket</title>
</head>

<body>
Welcome<br/>
<input id="text" type="text" /><button οnclick="send()">Send</button> <button οnclick="closeWebSocket()">Close</button>
<div id="message">
</div>
</body>

<script type="text/JavaScript">
var websocket = null;

//判断当前浏览器是否支持WebSocket
if('WebSocket' in window){
websocket = new WebSocket("ws://"+ window.location.host+"/${pageContext.request.contextPath}/chat");
}
else{
alert('Not support websocket');
}

//连接发生错误的回调方法
websocket.onerror = function(){
setMessageInnerHTML("error");
};

//连接成功建立的回调方法
websocket.onopen = function(event){
setMessageInnerHTML("open");
};

//接收到消息的回调方法
websocket.onmessage = function(){
setMessageInnerHTML(event.data);
};

//连接关闭的回调方法
websocket.onclose = function(){
setMessageInnerHTML("close");
};

//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function(){
websocket.close();
};

//将消息显示在网页上
function setMessageInnerHTML(innerHTML){
document.getElementById('message').innerHTML += innerHTML + '<br/>';
}

//关闭连接
function closeWebSocket(){
websocket.close();
}

//发送消息
function send(){
var message = document.getElementById('text').value;
websocket.send(message);
}
</script>

</html>

 



B、一阶进化（客户端发送信息，其他Session以右下角弹窗显示推送信息）

技术点：客户端接收到服务器的信息时，onmessage响应产生右下角弹框。


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页右下角的信息框</title>
</head>
<style type="text/css">
#winpop {
width: 200px;
height: 0px;
position: absolute;
right: 0;
bottom: 0;
border: 1px solid #666;
margin: 0;
padding: 1px;
overflow: hidden;
display: none;
}

#winpop .title {
width: 100%;
height: 22px;
line-height: 20px;
background: #FFCC00;
font-weight: bold;
text-align: center;
font-size: 12px;
}

#winpop .con {
width: 100%;
height: 90px;
line-height: 80px;
font-weight: bold;
font-size: 12px;
color: #FF0000;
text-decoration: underline;
text-align: center
}

#silu {
font-size: 12px;
color: #666;
position: absolute;
right: 0;
text-align: left;
text-decoration: underline;
line-height: 22px;
}

.close {
position: absolute;
right: 4px;
top: -1px;
color: #FFF;
cursor: pointer
}
</style>
<script type="text/javascript">
function tips_pop() {
var MsgPop = document.getElementById("winpop");
MsgPop.style.height = '0px';
var popH = parseInt(MsgPop.style.height);//将对象的高度转化为数字
if (popH == 0) {
MsgPop.style.display = "block";//显示隐藏的窗口
show = setInterval("changeH('up')", 2);
} else {
hide = setInterval("changeH('down')", 2);
}
document.getElementById("con_text").innerHTML = event.data;
setTimeout("tips_close()", 12200); //30秒后消息自动消失
}

function tips_close() {
var close_tips = document.getElementById("winpop");
close_tips.style.display = "none";
}

function changeH(str) {
var MsgPop = document.getElementById("winpop");
var popH = parseInt(MsgPop.style.height);
if (str == "up") {
if (popH <= 100) {
MsgPop.style.height = (popH + 4).toString() + "px";
} else {
clearInterval(show);
}
}
if (str == "down") {
if (popH >= 4) {
MsgPop.style.height = (popH - 4).toString() + "px";
} else {
clearInterval(hide);
MsgPop.style.display = "none"; //隐藏DIV
}
}
}
</script>

<script type="text/JavaScript">
var websocket = null;

//判断当前浏览器是否支持WebSocket
if ('WebSocket' in window) {
websocket = new WebSocket("ws://" + window.location.host
+ "/${pageContext.request.contextPath}/chat");
} else {
alert('Not support websocket');
}

//连接发生错误的回调方法
websocket.onerror = function() {
setMessageInnerHTML("error");
};

//连接成功建立的回调方法
websocket.onopen = function(event) {
setMessageInnerHTML("open");
};

//接收到消息的回调方法
websocket.onmessage = function() {
setMessageInnerHTML(event.data);
tips_pop();
};

//连接关闭的回调方法
websocket.onclose = function() {
setMessageInnerHTML("close");
};

//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function() {
websocket.close();
};

//将消息显示在网页上
function setMessageInnerHTML(innerHTML) {
document.getElementById('message').innerHTML += innerHTML + '<br/>';
}

//关闭连接
function closeWebSocket() {
websocket.close();
}

//发送消息
function send() {
var message = document.getElementById('text').value;
websocket.send(message);
}
</script>

<body>
<div id="silu">
<input id="text" type="text" />
<button οnclick="send()">Send</button>
<div id="message"></div>
</div>
<div id="winpop">
<div class="title">
您有新的短消息！<span class="close" οnclick="tips_close()">X</span>
</div>
<div id="con_text" class="con">1条未读信息</div>
</div>
</body>
</html>


C、二阶进化，只要登陆，客户端在该网站其他页面均可以收到消息 （客户端A.B只能在index.jsp里才可以接收消息）

技术点：WebSocket 建立一个单独的 iframe

一般都是用多 frame 来实现，即建立 WebSocket 是单独的一个 frame，且此 frame 不随页面切换而刷新，至于其他需要在页面切换时刷新的元素放在其他 frame 里。

 

标签：function,websocket,入门,session,实例,WebSocket,message,连接,客户端
From： https://www.cnblogs.com/kn-zheng/p/17054718.html

相关文章

  • 基于阿里云的 Terraform 入门实战
    介绍Terraform是一种部署技术，任何想要通过​​基础设施即代码（InfrastructureasCode,IaC）​​​的方式来管理基础设施的人，都可以使用这种技术。在这里​​基础设施​​​......
  • 230115_50_SpringBoot入门
    如果类中属性比较多，通过@value赋值比较麻烦。可以通过yaml配置文件给实例赋值。新建Person类，通过@ConfigurationProperties注解可以实现配置文件注入，其中prefix可以指......
  • FileWriter实例
    FileWriter实例要求：使用FileWriter将“风雨之后，定见彩虹”写入到note.txt文件中。publicclassFileWriter_{publicstaticvoidmain(String[]args){......
  • leetcode算法入门Day6---滑动窗口
    3.无重复字符的最长子串给定一个字符串s，请你找出其中不含有重复字符的最长子串的长度。测试用例：输入:s="abcabcbb"输出:3解释:因为无重复字符的最长子串......
  • three.js教程1-快速入门
    1、项目开发环境引入threeJs如果采用的是Vue+threejs或React+threejs技术栈，threejs就是一个js库，直接通过npm命令行安装就行。npm安装特定版本three.js(注意使用哪个......
  • Java入门关于JDK
    Java入门JDKJDK：JavaDevelopmentKitJDK是JavaDevelopmentKit的缩写，是Java的开发工具包。JDK:JavaDevelopmentToolKit(Java开发工具包)。JDK是整个JAVA的核心，包......
  • 极客编程python入门-数据库
    数据库程序运行的时候，数据都是在内存中的。当程序终止的时候，通常都需要将数据保存到磁盘上，无论是保存到本地磁盘，还是通过网络保存到服务器上，最终都会将数据写入磁盘文件。使......
  • Web安全入门与靶场实战（6）- 利用nmap进行主机发现
    下载靶机接下来我们将结合具体的靶机，通过实战来了解shentou测试的每个环节，并对其中所涉及的知识点进行详细介绍。课程中所使用的靶机主要来自VulnHub，这是一个全球知名的开源......
  • java多线程编程技术 +代码实例
    1.      java和他的API都可以使用并发。可以指定程序包含不同的执行线程，每个线程都具有自己的方法调用堆栈和程序计数器，使得线程在与其他线程并发地执行能够共享程序......
  • java：Cassandra入门与实战——上
    一、数据存储方式和NoSQL1.1数据存储方式互联网时代各种数据存储方式层出不穷，有传统的关系性数据库如：MySQL、Oracle等，；有全文检索框架如：ElasticSearch、Solr；有NoSQL如：Cassan......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99