1.HTML页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebScoket</title>
<script type="text/javascript" src="webjars/jquery/3.3.1-2/jquery.js"></script>
<script type="text/javascript" src="js/scoket.js"></script>
</head>
<body>
Welcome<br/>
<input id="text" type="text" /><button onclick="send()">Send</button> <button onclick="closeWebSocket()">Close</button>
<div id="message">
</div>
</body>
<script type="text/javascript">
var websocket = null;
//判断当前浏览器是否支持WebSocket
if('WebSocket' in window){
websocket = new WebSocket("ws://192.168.0.100:8002/websocket");
}
else{
alert('Not support websocket')
}
//连接发生错误的回调方法
websocket.onerror = function(){
setMessageInnerHTML("error");
};
//连接成功建立的回调方法
websocket.onopen = function(event){
setMessageInnerHTML("open");
}
//接收到消息的回调方法
websocket.onmessage = function(event){
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>
2.JS
var socket;
if(typeof(WebSocket) == "undefined") {
console.log("您的浏览器不支持WebSocket");
}else{
console.log("您的浏览器支持WebSocket");
//实现化WebSocket对象,指定要连接的服务器地址与端口 建立连接
socket = new WebSocket("ws://localhost:8002/websocket");
//打开事件
socket.onopen = function() {
console.log("Socket 已打开");
};
//获得消息事件
socket.onmessage = function(msg) {
console.log(msg.data);
playSound();
//发现消息进入 调后台获取
//getCallingList();
};
//关闭事件
socket.onclose = function() {
console.log("Socket已关闭");
};
//发生了错误事件
socket.onerror = function() {
alert("Socket发生了错误");
}
//关闭连接
function closeWebSocket() {
closeSound();
socket.close();
}
//发送消息
function send() {
var message = document.getElementById('text').value;
socket.send(message);
}
//播放提示声音方法
function playSound() {
var borswer = window.navigator.userAgent.toLowerCase();
if ( !!window.ActiveXObject || "ActiveXObject" in window ) {
//IE内核浏览器
var OSPlayer = new ActiveXObject("WMPLayer.OCX");
// OSPlayer.url = "http://www.xmf119.cn/static/admin/sounds/notify.wav";
// OSPlayer.url = "audio/notify.wav";
OSPlayer.url = "audio/test.mp3";
OSPlayer.controls.play();
} else {
//非IE内核浏览器
var strAudio = "<audio id='audioPlay' src='audio/test.mp3'<!--src='audio/notify.wav'--> <!--src='http://www.xmf119.cn/static/admin/sounds/notify.wav'--> hidden='true'>";
if ( $( "body" ).find( "audio" ).length <= 0 )
$( "body" ).append( strAudio );
var audio = document.getElementById( "audioPlay" );
//浏览器支持 audion
audio.play();
}
}
//暂停提示声音
function closeSound() {
var audio = document.getElementById( "audioPlay" );
audio.pause();// 这个就是暂停
}
}
3.访问localhost:端口号点击即可测试.