websocket使用心得

最新推荐文章于 2022-04-10 23:04:59 发布

Black____White

最新推荐文章于 2022-04-10 23:04:59 发布

阅读量484

点赞数 2

分类专栏： websocket 文章标签： websocket

本文链接：https://blog.csdn.net/Black____White/article/details/98071621

版权

websocket 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

websocket是一个可做于聊天方面的，它一共有4个主体方法。

使用时，首先判断浏览器是否支持websocket

    let websocket = null;
    let host ="192.168.2.124:8084/tldollar/websocket/"
    let username = 11; // 获得当前登录人员的userName（即是唯一的ID）


    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        console.log("浏览器支持Websocket")
        chat1 = new WebSocket('ws://'+host+username);
    } else {
        console.log('当前浏览器 Not support websocket')
    }

上面代码，首先host为服务器地址，username 可以理解为登录人的ID，这是唯一的。

如果浏览器支持,就实例化websocket。

这时我们要设置websocket的4个回调方法。即：连接发生错误，连接成功建立，接收到消息，连接关闭

 //连接发生错误的回调方法
    chat1.onerror = function() {
        console.log("WebSocket连接发生错误")
        setMessageInnerHTML("WebSocket连接发生错误");
    };

    //连接成功建立的回调方法
    chat1.onopen = function() {
        console.log("WebSocket连接成功")
        setMessageInnerHTML("WebSocket连接成功");
    }

    //接收到消息的回调方法
    chat1.onmessage = function(event) {
        console.log("接收到消息的回调方法")
        console.log("这是后台推送的消息："+event.data);
    }

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

这样就完成了websocket,下面我们要写一个发送信息的方法

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

	//发送消息
    function sendMessage() {
    	let s =username.toString()+$("#toUserId").val()
    	alert(s)
    	
        if(typeof(WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        }else {
            console.log("您的浏览器支持WebSocket");
            console.log('{"to":"'+$("#toUserId").val()+'","message":"'+$("#contentText").val()+'"}');
            chat1.send('{"to":"'+$("#toUserId").val()+'","message":"'+$("#contentText").val()+'"","roomId":"'+s+'"}');
        }
    }

这里我用了jq获取input的value值。send（）方法就是websocket发送消息给服务器的方法。再由服务器推给对方，所以我们要讲对方ID,消息内容推给服务器，让后端处理.

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>websocket</title>
</head>
<body>

    <p>【userId】：<div><input id="userId" name="userId" type="text" value="3"></div>
    <p>【toUserId】：<div><input id="toUserId" name="toUserId" type="text" value="17"></div>
    <p>【toUserMessage】：<div><input id="contentText" name="message" type="text" value="我是1给的你"></div>
    <p>【操作】：<div><button type="button" onclick="sendMessage()">发送消息</button></div>
    <br/>
    <br/>
    <br/>
    <div id="message" style="color: blue;"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">

    let websocket = null;
    let host ="192.168.2.124:8084/tldollar/websocket/"
    let username = 11; // 获得当前登录人员的userName


    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        console.log("浏览器支持Websocket")
        chat1 = new WebSocket('ws://'+host+username);
    } else {
        console.log('当前浏览器 Not support websocket')
    }

    //连接发生错误的回调方法
    chat1.onerror = function() {
        console.log("WebSocket连接发生错误")
        setMessageInnerHTML("WebSocket连接发生错误");
    };

    //连接成功建立的回调方法
    chat1.onopen = function() {
        console.log("WebSocket连接成功")
        setMessageInnerHTML("WebSocket连接成功");
    }

    //接收到消息的回调方法
    chat1.onmessage = function(event) {
        console.log("接收到消息的回调方法")
        console.log("这是后台推送的消息："+event.data);
    }

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


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

    //关闭WebSocket连接
    function closeWebSocket() {
        chat1.close();//这样就关闭了websocket连接
    }

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

	//发送消息
    function sendMessage() {
    	let s =username.toString()+$("#toUserId").val()
    	alert(s)
    	
        if(typeof(WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        }else {
            console.log("您的浏览器支持WebSocket");
            console.log('{"to":"'+$("#toUserId").val()+'","message":"'+$("#contentText").val()+'"}');
            chat1.send('{"to":"'+$("#toUserId").val()+'","message":"'+$("#contentText").val()+'"","roomId":"'+s+'"}');
        }
    }

</script>
</html>

服务器推给你的代码应该是有带状态的，应该在onmessage的方法中写判断，来判断账户是否有无在别地登录。

自动重连websockt要写在onclose方法里面，只要断开连接这个回调方法便会一直执行，不需要你写 setInterval() 的循环函数。

Black____White

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
websocket使用心得

websocket是一个可做于聊天方面的，它一共有4个主体方法。使用时，首先判断浏览器是否支持websocket let websocket = null; let host ="192.168.2.124:8084/tldollar/websocket/" let username = 11; // 获得当前登录人员的userName（即是唯一的ID） ...
复制链接

扫一扫