java 开发 websocket 网页端聊天室
博客地址：https://ainyi.com/67
WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。
需要导入一个jar包：javax.websocket-api-1.0-rc4.jar
注意点：
需要实现这几个方法：
//注册事件
ws.onopen = function(){
openWs();
};
ws.onmessage = function(event){
msgWs(event);
};
ws.onclose = function(){
closeWs();
};
ws.onerror = function(){
errorWs();
};
后台代码：
package com.krry.socket;
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("/websocket")
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 onError(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--;
}
}
前端代码：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>基于Java服务器端的消息主动推送技术揭秘 --krry</title>
<link rel="stylesheet" href="css/animate.css"/>
<link rel="stylesheet" type="text/css" href="css/sg.css" />
<style>
*{margin:0;padding:0;}
body{background:url("images/5.jpg");background-size:cover;}
h1{margin-top:50px;text-align:center;color:#fff;text-shadow:1px 1px 1px #000;font-family:-webkit-body;font-size:24px;}
.box{width:700px;margin:20px auto;}
.box span{color:#f60;font-size:16px;font-family:"微软雅黑";}
.box .shu{text-indent:1em;height:24px;font-family:"微软雅黑";border:0;outline:none;font-size:14px;}
.box .add{width:300px;margin-right:24px;}
.box .user{width:200px;}
.box .btn{width:80px;height:34px;color:#fff;background:#6c0;border:0;outline:none;cursor:pointer;margin-top:20px;font-size:16px;font-family:"微软雅黑";}
.box .area{line-height: 29px;height:280px;width:680px;padding:10px;overflow:auto;font-size:16px;font-family:"微软雅黑";margin:20px 0;outline:none;box-shadow:1px 2px 18px #000}
.box .setex{text-indent:1em;height:28px;border:1px solid #6c0;width:618px;outline:none;float:left;font-family:"微软雅黑";}
.box .send{font-size:14px;width:80px;height:30px;color:#fff;background:#6c0;border:0;outline:none;cursor:pointer;font-family:"微软雅黑";}
</style>
</head>
<body>
<h1>基于Java服务器端的消息主动推送技术揭秘 --krry</h1>
<div class="box">
<span>服务器地址：</span><input type="text" class="shu add" value="localhost/krry_NetChat/websocket" readonly/>
<span>用户名：</span><input type="text" class="shu user" value="匿名"/>
<input type="button" value="连接" class="btn" />
<div class="area" id="boxx"></div>
<div class="c_cen">
<input type="text" class="setex"/>
<input type="button" value="发送" class="send">
</div>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/sg.js"></script>
<script src="js/sgutil.js"></script>
<script>
var close = true;
var ws;
$(function(){
$(".c_cen").hide();
//首先判断浏览器是否支持webSocket，支持h5的浏览器才会支持
if(window.WebSocket){
printMsg("您的浏览器支持WebSocket，您可以尝试连接到聊天服务器！","OK");
}else{
printMsg("您的浏览器不支持WebSocket，请选择其他浏览器！","ERROR");
//设置按钮不可点击
$(".btn").attr("disabled","true");
}
});
//打印信息
function printMsg(msg,msgType){
if(msgType == "OK"){
msg = "<span style='color:green'>"+msg+"</span>";
}
if(msgType == "ERROR"){
msg = "<span style='color:red'>"+msg+"</span>";
}
$(".area").append(msg+"<br/>");
var boxx = document.getElementById("boxx");
boxx.scrollTop = boxx.scrollHeight;//使滚动条一直在底部
} //打开Socket
function openWs(){
printMsg("链接已建立","OK");
ws.send("【"+$(".user").val()+"】已进入聊天室");
$(".c_cen").show();
} //接收消息的时候
function msgWs(e){
printMsg(e.data);
}
//关闭连接
function closeWs(){
$(".btn").val("连接");
$(".c_cen").hide();
}
//产生错误
function errorWs(){
printMsg("您与服务器连接错误...","ERROR");
} //点击发送按钮
$(".send").click(function(){
var text = $(".setex").val();
if(text == null || text == "") return;
$(".setex").val("");
ws.send("【"+$(".user").val()+"】："+text);
}); //点击连接
$(".btn").click(function(){
if($(".add").val() && $(".user").val()){
if(close){
printMsg("正在准备连接服务器，请稍等...");
var url = "ws://"+$(".add").val();
if("WebSocket" in window){
ws = new WebSocket(url);
}else if("MozWebSocket" in window){
ws = new MozWebSocket(url);
}
//已连接
$(".btn").val("断开");
close = false; //注册事件
ws.onopen = function(){
openWs();
};
ws.onmessage = function(event){
msgWs(event);
};
ws.onclose = function(){
closeWs();
};
ws.onerror = function(){
errorWs();
}; //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function(){
ws.send("【"+$(".user").val()+"】离开了聊天室");
close = true;
ws.close();
}; }else{
ws.send("【"+$(".user").val()+"】离开了聊天室");
close = true;
ws.close();
}
}else{
$.tmDialog.alert({open:"left",content:"服务器地址和用户名不能为空哦...",title:"提示哦~~~"});
}
}); //回车键
$(".setex").keypress(function(event){
if(event.keyCode == 13){
$(".send").trigger("click");
}
});
</script>
</body>
</html>
博客地址：https://ainyi.com/67
java 开发 websocket 网页端聊天室的更多相关文章
- 分享基于 websocket 网页端聊天室
博客地址:https://ainyi.com/67 有一个月没有写博客了,也是因为年前需求多.回家过春节的原因,现在返回北京的第二天,想想,应该也要分享技术专题的博客了!! 主题 基于 websock ...
- 如何利用WebSocket实现网页版聊天室
花了将近一周的时间终于完成了利用WebSocket完成网页版聊天室这个小demo,期间还走过了一段"看似弯曲"的道路,但是我想其实也不算是弯路吧,因为你走过的路必将留下你的足迹.这 ...
- workerman-chat（PHP开发的基于Websocket协议的聊天室框架）（thinkphp也是支持socket聊天的）
workerman-chat(PHP开发的基于Websocket协议的聊天室框架)(thinkphp也是支持socket聊天的) 一.总结 1.下面链接里面还有一个来聊的php聊天室源码可以学习 2. ...
- vue仿微信网页版|vue+web端聊天室|仿微信客户端vue版
一.项目介绍 基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室— ...
- 与众不同 windows phone (31) - Communication（通信）之基于 Socket UDP 开发一个多人聊天室
原文:与众不同 windows phone (31) - Communication(通信)之基于 Socket UDP 开发一个多人聊天室 [索引页][源码下载] 与众不同 windows phon ...
- 与众不同 windows phone (30) - Communication（通信）之基于 Socket TCP 开发一个多人聊天室
原文:与众不同 windows phone (30) - Communication(通信)之基于 Socket TCP 开发一个多人聊天室 [索引页][源码下载] 与众不同 windows phon ...
- 基于Node.js + WebSocket 的简易聊天室
代码地址如下:http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.js ...
- XMPPFrameWork IOS 开发（六）聊天室
原始地址:XMPPFrameWork IOS 开发(六)聊天室 聊天室 //初始化聊天室 XMPPJID *roomJID = [XMPPJID jidWithString:ROOM_JID]; xm ...
- JAVA实现webSocket网页聊天室
一.什么是webSocket WebSocket 是一种网络通信协议,是持久化协议.RFC6455 定义了它的通信标准. WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全 ...
随机推荐
- POJ3040--Allowance(贪心)
http://poj.org/problem?id=3040 思路: 输入时,如果有大于c的,直接把数量加到结果中,不把他加到数组中 把钱按面值排序 想取最大面额的钱,保证取到的钱小于等于c 然后取最 ...
- 2019/3/2周末 java集合学习（一）
Java集合学习(一) ArraysList ArraysList集合就像C++中的vector容器,它可以不考虑其容器的长度,就像一个大染缸一 样,无穷无尽的丢进去也没问题.Java的数据结构和C有 ...
- HTML 列表中的dl,dt,dd,ul,li,ol区别及应用
无序列表 无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记. 无序列表始于 <ul> 标签.每个列表项始于 <li>. 有序列表 同样,有序列表也是 ...
- 《Java性能调优》学习笔记（1）
性能的参考指标 执行时间 -- 从代码开始运行到结束的时间 CPU时间 -- 函数或者线程占用CPU的时间 内存分配 -- 程序在运行时占用内存的情况 磁盘吞吐量 -- 描述IO的使用情况 网络吞吐量 ...
- Dubbo 源码分析 - 服务调用过程
注: 本系列文章已捐赠给 Dubbo 社区,你也可以在 Dubbo 官方文档中阅读本系列文章. 1. 简介 在前面的文章中,我们分析了 Dubbo SPI.服务导出与引入.以及集群容错方面的代码.经过 ...
- BATJ等公司必问的8道Java经典面试题，你都会了吗？
1.谈谈你对 Java 平台的理解?“Java 是解释执行”,这句话正确吗? 考点分析: 对于这类笼统的问题,你需要尽量表现出自己的思维深入并系统化,Java 知识理解得也比较全面,一定要避免让面试官 ...
- 开源网盘云存储 Seafile
摘要: Seafile 是一款安全.高性能的开源网盘(云存储)软件.Seafile 提供了主流网盘(云盘)产品所具有的功能,包括文件同步.文件共享等.在此基础上,Seafile 还提供了高级的安全保护 ...
- Kali学习笔记13：操作系统识别
为什么要扫描操作系统呢? 其实和上一篇博客:<服务扫描>类似,都是为了能够发现漏洞 发现什么漏洞? 不同的操作系统.相同操作系统不同版本,都存在着一些可以利用的漏洞 而且,不同的系统会默认 ...
- [Swift]Alamofire：设置网络请求超时时间【timeout】的两种方式
两种方式作用相同,是同一套代码的两种表述. 第一种方式:集聚. 直接设置成员属性(全局属性),这种方法不能灵活修改网络请求超时时间timeout. 声明为成员属性: // MARK: - 设置为全局变 ...
- Spring Boot 返回 XML 数据，一分钟搞定！
Spring Boot 返回 XML 数据,前提必须已经搭建了 Spring Boot 项目,所以这一块代码就不贴了,可以点击查看之前分享的 Spring Boot 返回 JSON 数据,一分钟搞定! ...