要求：Tomcat必须7.0以上，创建Dynamic web project
1.前台代码
index.html
注意：把js文件引一下，或者用百度的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery.min.js"></script>
<title>webSocket页面</title>
<style type="text/css">
body {
background: url("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2629712266,1629089266&fm=26&gp=0.jpg");
}//背景图为百度图片
/*右下角提示框样式start*/
.pop {
position: fixed;
right: 10px;
bottom: 10px;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
display: block;
opacity: 0.9;
}
.popHead {
background: #fff;
width: 250px;
height: 10px;
line-height: 10px;
padding: 10px;
border: 1px solid #aaa;
font-size: 16px;
}
.popHead a {
float: right;
color: #f23456;
cursor: pointer;
display: block;
text-decoration: none;
}
.popHead span {
font-size: 15px;
}
.popContext {
height: 80px;
padding: 15px;
background: #f1f1f1;
}
</style>
<script type="text/javascript">
//提示内容，封装方法
function pop(title, text, time) {
if(title == undefined) {
title = "消息提示";
}
if(text == undefined) {
text = "收到新的消息";
}
if(time == undefined) {
time = 2000;
}
//将消息标题，内容放到一个地方
$("#popHead span").html(title);
$("#popTxt").html(text);
//框框显示出来，每隔三秒自动消失
$("#pop").show(100, "linear", function() {
setTimeout("closePop()", time);
});
}
//关闭消息弹出框
function closePop() {
$("#pop").hide();
}
</script>
</head>
<script type="text/javascript">
var websocket = null;
if('websocket' in window) {
console.log(window);
websocket = new WebSocket("ws://localhost:8080/testWeb/MsgWebSocket");
} else {
alert("警告！您的浏览器不支持webSocket!!")
}
/*浏览器关闭前，回调函数，防止服务端抛异常 */
window.onbeforeunload = function() {
websocket.close();
}
/*当浏览器接收到websocket消息*/
websocket.onmessage = function(event) {
//console.log(event); //调试数据
popMsg(event.data);
};
/*消息来临时，弹出框显示消息，并播放语音，将消息追加到当前页面div中 */
function popMsg(msg) {
$("#allMsg").append(msg + "<br/>");
//封装一个消息弹出的方法(消息标题，消息内容，消息显示时长)
pop("消息提示", msg, 3000);
//语音播放，自己搜索百度语音api平台
var obj = $('<audio src="http://fanyi.baidu.com/gettts?lan=zh&text=' + msg + '&spd=5&sorce=web" autoplay> </audio>');
$("#pop").append(obj);
}
/* [发送信息]案例*/
function sendMsg() {
var message = $("#txtMsgSend").val();
$("allMsg").append(message + "<br/>");
websocket.send(message);
}
/*[关闭]*/
function closeMsg() {
websocket.send("有用户掉线了！！");
websocket.close();
}
</script>
<body>
<input type="text" name="txtMsgSend" id="txtMsgSend" />
<button onclick="sendMsg()">发送信息</button>
<button onclick="closeMsg()">关闭</button>
<div id="allMsg">
</div>
<!--
作者：[email protected]
时间：2018-10-23
描述：右下角消息提示框
-->
<div id="pop" class="pop">
<div id="popHead" class="popHead">
<a title="关闭" onclick="closePop()">关闭</a><span></span>
<div id="popTxt" class="popContext">
</div>
</div>
</div>
</body>
</html>
2.后台代码
在src创建class
我的是 com.fcy.service
MsgWebSocket.java
package com.fcy.service;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
/**
* webSocket的服务端:负责接收所有浏览器的消息，并负责转发
* @author fansds
*
*/
@ServerEndpoint(value="/MsgWebSocket")
public class MsgWebSocket {
//当每一个连接来的时候都会实例化一个MsgWebSocket
private static CopyOnWriteArraySet<MsgWebSocket> webSockets =new CopyOnWriteArraySet<>();
//与任何一个客户端的连接都有会话
private Session session;
@OnOpen
public void onOpen(Session session) {
this.session=session;
webSockets.add(this);
sendMsgToOthers("有新用户上线");
}
@OnClose
public void onClose(Session session) {
this.session=session;
webSockets.remove(this);
}
//给其他所有用户发送消息，不给自己发
private void sendMsgToOthers(String message) {
for(MsgWebSocket item:webSockets) {
System.out.println(this.session);
//不给自己发送(谁发的消息，就不给谁转发)
if (this.session.getBasicRemote().equals(item.session.getBasicRemote())) {
continue;
}
//封装一个给每个session发送消息的方法
item.sendMessage(message);
}
}
private void sendMessage(String message) {
try {
this.session.getBasicRemote().sendText(message);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
/*
* 当服务器接收到消息的时候，做消息转发
*/
@OnMessage
public void onMessage(String message,Session session) {
System.out.println("来自客户端的消息："+message);
//当有消息来临时，给除去自己外的所有人发送消息
sendMsgToOthers(message);
}
}
3.启动Tomcat测试效果图
打开两个页面进行交互，互发信息
总结：WebSocket 是一种网络通信协议。WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
websocket的属性及方法：
写的不好，仅供参考。欢迎大神指点