Websocket前端代码示例

最新推荐文章于 2024-07-31 12:06:54 发布

qq_42750608

最新推荐文章于 2024-07-31 12:06:54 发布

阅读量993

点赞数

本文链接：https://blog.csdn.net/qq_42750608/article/details/89140306

版权

<%@ page language="java" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>Websocket</title>
</head>
<body>
	登录:<input id="user" type="text"/><input id="login" type="button" value="登录" onclick="login();"/>
    欢迎进入!<br/>
    <input id="message" type="text"/>
    <button onclick="send()">发送消息</button>
   	好友:<input id="toname" type="text"/>
    <hr/>
    <button onclick="closeWebSocket()">关闭WebSocket连接</button>
    <hr/>
    <div id="show"></div>
</body>

<script type="text/javascript">
    var websocket = null;
    //将消息显示在网页上
    function setMsgHTML(innerHTML) {
        document.getElementById('show').innerHTML += innerHTML + '<br/>';
    }

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

    //发送消息
    function send() {
    	var fromname = document.getElementById('user').value;;
    	var toname = document.getElementById('toname').value;
        var message = document.getElementById('message').value;
        websocket.send(fromname+','+toname+','+message);
    }
    function login(){
    	var xlh = null;
    	try{
    		xlh=new XMLHttpRequest();
   		}catch(e){
   			xlh=ActiveXObject('Microsoft.XMLHTTP');
   		};
   		
        xlh.onreadystatechange=function(){
        	if(xlh.readyState==4 && xlh.status==200) {
        		setMsgHTML("成功登录:"+xlh.responseText);
        		//判断当前浏览器是否支持WebSocket
        	    if ('WebSocket' in window) {
        	        websocket = new WebSocket("ws://localhost:8080/JavaWebSocket/websocket");
        	    }
        	    else {
        	        alert('当前浏览器 Not support websocket')
        	    }
        	    //连接发生错误的回调方法
        	    websocket.onerror = function () {
        	        setMsgHTML("WebSocket连接发生错误");
        	    };

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

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

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

        	    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        	    window.onbeforeunload = function () {
        	        closeWebSocket();
        	    }
        	}
        }
        xlh.open("POST", "loginServlet" ,true);
      	//如果是POST请求方式，设置请求首部信息
        xlh.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xlh.send("user="+document.getElementById('user').value);
    }  
</script>
</html>