webSocket

已于 2023-11-07 16:20:41 修改
阅读量307 收藏
点赞数
文章标签： websocket 网络协议 网络
于 2023-11-03 17:03:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73427312/article/details/134201385
版权

介绍:

readyState表示连接有四种状态：

  1. connecting (0)：表示还没建立连接；

  2. open    (1)： 已经建立连接，可以进行通讯；

  3. closing (2)：通过关闭握手，正在关闭连接；

  4. closed  (3)：连接已经关闭或无法打开； 

前端代码表示

原生JS(HTML+JS)

HTML文件

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>通信</title>
</head>

<body>
<ul id="list"></ul>
<input  type="text" id="message" placeholder="请输入内容"  />
<button id="send">发送</button>


  <script src="XXX.js> </script>
   
   
</body>
</html>

JS文件


//立即执行函数,避免全局变量之间的污染
;((doc)=>{

const oList=doc.querySelector('#list');
const oMsg=doc.querySelector('#message');
const oSendBtn.querySelector('#send');
const ws=new Socket('ws:localhost:8000');//创建一个Socket实例

//初始化函数
const init=()=>{
bindEvent();
}

//绑定事件函数,监听oSendBtn,
//最后参数是指定事件是否在捕获或冒泡阶段执行,false是默认冒泡阶段执行,true捕获阶段执行
function bindEvent(){
  oSendBtn.addEventListener('click',handSendBtnClick,false);  
  ws.addEventListener('open',handOpen,false);
  ws.addEventListener('close',handClose,false);
  ws.addEventListener('error',handError,false);
  ws.addEventListener('message',handMessage,false);
}

//具体的点击事件
function handSendBtnClick(){
console.log('发送的具体消息')
  const msg=oMsg.value
   if(!msg.trim().length){
     return
   }
//发送的应该为字符串
  ws.send(JSON.stringfy({ 
     dataTime:new Data().getTime(),
     message:msg 
}))  

oMsg.value=''
}

//socket的四个事件
function handOpen(){
console.log('打开')
}

function handClose(){
console.log('关闭')
}

function handError(){
console.log('')
}

function handMessage(e){
console.log('接收消息',e.data)
const msgData=JSON.parse(e.data) //转化为对象
oList.appendChild(createMsg(msgData)) //转为li
}
//做成LI的格式
function createMsg(data){
const {user,dataTime,message}=data
const oItem=doc.createElement('li')
oItem.innerHTML=`
<p>
<span>${user}</span>
<li>${new Data()}</li>
</p>
<p>消息:${message}</p>
`
return oItem
}


init()


})(document);

​​​​​​​纯HTML

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>聊天室</title>

    <script type="text/javascript">

        var ws = null;
        var interval = null;
        var uri = "ws://192.168.110.92:8080/schedule/websocket/connect";
        var myVar = null;
        var reconnectState = null;

        function WebSocketTest() {
            if ("WebSocket" in window) {
                createWebSocket();
            } else {
                // 浏览器不支持 WebSocket
                alert("您的浏览器不支持 WebSocket!");
            }
        }

        /**
       * 创建websocket
       */
        function createWebSocket() {
            alert("开启长连接")
            // 打开一个 web socket
            ws = new WebSocket(uri);
            ws.onopen = function () {
                document.getElementById("reconnectShow").innerText = "无";
                document.getElementById("online").innerText = "在线";
                reconnectState = false;
                clearInterval(myVar);
                // 心跳检测
                interval = setInterval(function () {
                    // 使用 send() 方法发送数据		
                    sendMsg("ping");
                }, 5000);

            };

            ws.onmessage = function (evt) {
                var received_msg = evt.data;
                console.log("回复",evt.data);
                if (received_msg == "pong") {
                    console.log(received_msg);
                } else {
                    document.getElementById("num").innerText = received_msg;
                }
            };

            ws.onclose = function () {
                webscoketClose();
            };
        }


        /**
       * websocket重连
       */
        function reconnect() {
            // 检测到websocket连接断开
            // 0 (WebSocket.CONNECTING)正在链接中
            // 1 (WebSocket.OPEN)已经链接并且可以通讯
            // 2 (WebSocket.CLOSING) 连接正在关闭
            // 3 (WebSocket.CLOSED)连接已关闭或者没有链接成功
            if (reconnectState == false) {
                reconnectState = true;
                var reconnectNum = 1;
                console.log(ws.readyState);
                myVar = setInterval(function () {
                    if (ws.readyState == 2 || ws.readyState == 3) {
                        if (reconnectNum == 6) {
                            clearInterval(myVar);
                            document.getElementById("reconnectShow").innerText = "停止重连";
                            return;
                        }
                        document.getElementById("reconnectShow").innerText = "第" + reconnectNum + "次尝试重连中";
                        createWebSocket();
                        reconnectNum++;
                    }

                }, 5 * 1000)
            }
        }

        function noReconnectclose() {
            reconnectState = true;
            webscoketClose();
        }

        /**
         * websocket关闭 
         */
        function webscoketClose() {
            ws.close();
            clearInterval(interval)
            console.log("websocket关闭");
            document.getElementById("online").innerText = "离线";
            // 开启断线重连
            reconnect();
        }

        function sendMsg(str) {
            if (ws.readyState == 1) {
                ws.send(str);
                // alert("发送内容");
            } else {
                alert("未连接上服务器");
            }
        }

        function add() {
            sendMsg("+1");
        }

        function remove() {
            sendMsg("-1");
        }

    </script>

</head>

<body>
    <div id="sse">
        <a href="javascript:WebSocketTest()">运行 WebSocket</a>
        <a href="javascript:noReconnectclose()">停止 WebSocket</a>
    </div>
    <br>
    当前webscoket状态:<span id="online">离线</span>
    <br>
    当前重连状态：<span id="reconnectShow">无</span>
    <br>
    当前怒气值：<span id="num">0</span>
    <br>
    <a href="javascript:add()">+1</a>
    <a href="javascript:remove()">-1</a>
</body>

</html>

vue简单的逻辑 

客户端页面:

 <div id="app" >
        <ul>
            <li v-for="item in msgList" :key="item.id">
                <p>
                    <span>{{item.username}}:</span>
                    <span>{{new Date(item.dataTime)}}</span>
                </p>
                <p>消息:{{item.msg}}</p>
            </li>
        </ul>
        <input type="text" placeholder="请输入消息" v-model="msg" />
        <button @click="sendMsg">发送</button>
    </div>
<script>
    const ws = new WebSocket('ws://localhost:8000')


    new Vue({
        el: '#app',
        data: {
            msg: '',
            username: '',
            msgList: []

        },
        mounted() {
            ws.addEventListener('open', this.handleWsOpen.bind(this), false) // 监听连接打开 前面的this指向绑定的ws,bind里面的this为了改变指向,指向当前vue实例
            ws.addEventListener('close', this.handleWsClose.bind(this), false) // 监听连接关闭
            ws.addEventListener('error', this.handleWsError.bind(this), false) // 监听连接错误
            ws.addEventListener('message', this.handleWsMessage.bind(this), false) // 监听消息

        },
        methods: {
            sendMsg() {
                //把绑定的消息取出来
                const msg=this.msg
                //如果去掉两边空格,长度还为0,则返回不再进行下一步
             if(!msg.trim().length){
                return
             }

                //把当前时间戳
                const dataTime=new Date().getTime()
                //把用户名
                const username=this.username
                //把消息发送到服务器
                ws.send(JSON.stringify({
                    msg,
                    dataTime,
                    username
                }))
                //不可以传对象 要转化为JSON字符串
                // ws.send({   
                //    id:new Data().getTime(),
                //    user:this.username,
                //    dataTime:new Data().getTime(),
                //    msg:this.msg 
                // })
                this.msg=''   //注意发送完要清空输入框
            },
            handleWsOpen(e) {
                console.log('连接成功')
            },
            handleWsClose(e) {
                console.log('连接关闭')
            },
            handleWsError(e) {
                console.log('连接错误')
            },
            handleWsMessage(event) {
                const data = JSON.parse(event.data)   //内容包裹在data中 且需要转换为对象
                this.msgList.push(data)
                console.log(data)
            }
        }
    })
</script>

 服务器部分:

增加长连接的方式 :

<template>
         <ul>
            <li v-for="item in msgList" :key="item.id">
                <p>
                    <span>{{item.username}}:</span>
                    <span>{{new Date(item.dataTime)}}</span>
                </p>
                <p>消息:{{item.msg}}</p>
            </li>
        </ul>
        <input type="text" placeholder="请输入消息" v-model="msg" />
        <button @click="sendDataToServer">发送</button>
</template>
 
<script>
    export default {
        name: "WebSocket",
        data() {
            return {                
                wsIsRun: false,     // ws是否启动              
                webSocket: null,    // 定义ws对象                
                ws: '',             // ws请求链接（类似于ws后台地址）
                wsTimer: null,      // ws定时器
                msg: '',
                username: '',
                msgList: [],       //包含传过去的id,username,dataTime
            }
        },
        async mounted() {
            this.wsIsRun = true
            this.wsInit()
        },
        methods: {
            sendDataToServer() {
                if (this.webSocket.readyState === 1) {
                   // this.webSocket.send('来自前端的数据')
                 //把绑定的消息取出来
                const msg = this.msg
                //如果去掉两边空格,长度还为0,则返回不再进行下一步
                if (!msg.trim().length) {
                    return
                }
                //当前时间戳
                const dataTime = new Date().getTime()
                //用户名
                const username = this.username
                //把消息发送到服务器
                this.webSocket.send(JSON.stringify({
                    msg,
                    dataTime,
                    username
                }))
                 this.msg = ''   //注意发送完要清空输入框
                } else {
                    throw Error('服务未连接')
                }
            },
            /**
             * 初始化ws
             */
            wsInit() {
                const wsuri = 'ws://10.229.36.158:7777/websocket/badao'
                this.ws = wsuri
                if (!this.wsIsRun) return
                // 销毁ws
                this.wsDestroy()
                // 初始化ws
                this.webSocket = new WebSocket(this.ws)
                // ws连接建立时触发
                this.webSocket.addEventListener('open', this.wsOpenHanler)
                // ws服务端给客户端推送消息
                this.webSocket.addEventListener('message', this.wsMessageHanler)
                // ws通信发生错误时触发
                this.webSocket.addEventListener('error', this.wsErrorHanler)
                // ws关闭时触发
                this.webSocket.addEventListener('close', this.wsCloseHanler)
 
                // 检查ws连接状态,readyState值为0表示尚未连接，
               //  1表示建立连接，2正在关闭连接，3已经关闭或无法打开
                clearInterval(this.wsTimer)
                this.wsTimer = setInterval(() => {
                    if (this.webSocket.readyState === 1) {
                        clearInterval(this.wsTimer)
                    } else {
                        console.log('ws建立连接失败')
                        this.wsInit()
                    }
                }, 3000)
            },
            wsOpenHanler(event) {
                console.log('ws建立连接成功')
            },
            wsMessageHanler(e) {
                console.log(e)
                const data = JSON.parse(e.data)   //内容包裹在data中 且需要转换为对象
                this.msgList.push(data)
            },
            /**
             * ws通信发生错误
             */
            wsErrorHanler(event) {
                console.log(event, '通信发生错误')
                this.wsInit()
            },
            /**
             * ws关闭
             */
            wsCloseHanler(event) {
                console.log(event, 'ws关闭')
                this.wsInit()
            },
            /**
             * 销毁ws
             */
            wsDestroy() {
                if (this.webSocket !== null) {
                    this.webSocket.removeEventListener('open', this.wsOpenHanler)
                    this.webSocket.removeEventListener('message', this.wsMessageHanler)
                    this.webSocket.removeEventListener('error', this.wsErrorHanler)
                    this.webSocket.removeEventListener('close', this.wsCloseHanler)
                    this.webSocket.close()
                    this.webSocket = null
                    clearInterval(this.wsTimer)
                }
            },
        }
    }
</script>
 
<style scoped>
 
</style>

页面布局:

:style="i.userId == userId? 'float: right' : '' "   

:class="i.userId == userId? 'right':'left'"  

可用于区分聊天内容在左侧还是右侧

.left {
          background: white;
          animation: toLeft 0.5s ease both 1;
        }
        .right {
          background: #53a8ff;
          color: white;
          animation: toright 0.5s ease both 1;
        }
        @keyframes toLeft {
          0% {
            opacity: 0;
            transform: translateX(-10px);
          }
          100% {
            opacity: 1;
            transform: translateX(0px);
          }
        }
        @keyframes toright {
          0% {
            opacity: 0;
            transform: translateX(10px);
          }
          100% {
            opacity: 1;
            transform: translateX(0px);
          }
        }
      }
    }

陈轻轻超轻
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
websocket的状态
u013036068的博客
11-02 2万+
websocket的两个属性：readyState和bufferedAmount。 根据readyState属性可以判断webSocket的连接状态，该属性的值可以是下面几种： 0 ：对应常量CONNECTING (numeric value 0)，  正在建立连接连接，还没有完成。The connection has not yet been established
js ws 状态_Websocket -- JS的前端页面
weixin_39792475的博客
12-30 1745
一个html5 WebSocket + JS的简单Echo例子，例子代码演示效果猛戳链接：websocket例子(打开页面，稍等一会)使用一个文本编辑器，把下面代码复制保存在一个 websocket.html 文件中，然后只要在浏览器中打开它，页面就会使用 websocket 自动连接，发送一个消息，显示接受到的服务器响应，然后关闭连接。WebSocket TestvarwsUri="ws://e...
如何获取javascript webSocket连接的当前状态？
qq_42572322的博客
06-13 1万+
这是非常简单的：readyStatewebsocket 的属性总是包含websocket的连接，正如WebSocket API 它将是以下值之一：CONNECTING OPEN CLOSING或CLOSED 解决错误的方法是这样的： if(yourWsObject.readyState === yourWsObject.CLOSED){ // Do your stuff... } ...
JS检测浏览器是否支持WebSocket
橙-极纪元-cplvfx-JJY.Cheng
09-03 1047
if(typeof(WebSocket)!=="undefined") { alert("支持 WebSocket"); } else { alert("您的浏览器不支持 WebSocket"); }
vue3使用WebSocket实现实时判断用户登录状态
最新发布
翱翔-蓝天
05-23 444
如果你还没有 WebSocket 库，可以安装一个，比如。：在服务器端实现一个 WebSocket 服务，用于处理用户登录状态的管理。这里假设你已经有一个 WebSocket 服务在运行。socket.js。
WebSocket的状态
橙-极纪元-cplvfx-JJY.Cheng
09-19 2148
// // 摘要: // 定义 WebSockets 实例可能处于的不同状态。 public enum WebSocketState { // // 摘要: // 留待将来使用。 None = 0, // // 摘要: // 连接正在与远程终结点协商握手。 Connecting = 1, // .
判断websocket状态
热门推荐
qq_35577329的博客
09-29 1万+
只要在函数中添加对状态的判断，在状态为OPEN时，执行send方法即可。方法一代码如下： function TestSockets() { var socket = new WebSocket(“ws://127.0.0.1:8000/ws”); var message = { nickname: “benben_2015”, email: “123456@qq.com”, content: “I...
websocket
过客如期的博客
02-18 2931
一，前言 1.传统的http协议只支持客户端向服务端发起通信。 2.websocket协议最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，实现双向通信。 3.WebSocket已经是国际标准，所有浏览器都已经支持了WebSocket 。 二，WebSocket语法 1.不同于http协议标识http，WebSocket协议标识符是ws 2.使用方式 （1）建立连接，非常简单直接使用new WebSocket()即可建立链接 let ws = new WebSocket("ws
WebSocket协议状态码解析
博客
08-17 3946
WebSocket协议状态码是一个16位的整数，用于表示WebSocket连接的状态。状态码的第一个数字表示状态的分类，后三个数字表示具体的状态。1xxx：表示信息性状态码，用于传递一些非错误信息。2xxx：表示成功状态码，用于表示连接成功或操作成功。3xxx：表示重定向状态码，用于表示需要进一步操作以完成请求。4xxx：表示客户端错误状态码，用于表示客户端发送的请求有误。5xxx：表示服务器错误状态码，用于表示服务器无法完成请求。1000：正常关闭1001：终端离开。
.net websocket
10-14
在.NET框架中，WebSocket提供了一种简单的方式来构建高性能的实时应用，比如聊天室、在线游戏或者实时数据图表等。本文将深入探讨.NET环境下，特别是在WinForms应用程序中使用WebSocket的相关知识点。 首先，.NET ...
websocket c语言实现
10-07
WebSocket是一种在客户端和服务器之间建立持久连接的协议，它允许双方进行全双工通信，即数据可以在两个方向上同时传输，极大地提高了实时性。在Web开发中，WebSocket为需要实时交互的应用提供了强大的支持，比如...
websocket总结
07-25
WebSocket 总结 WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。通过 TCP 来传输数据在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输...
常见HTTP/FTP/WebSockets状态码大全
jiangshubian的博客
06-24 1318
HTTP 1xx消息 这一类型的状态码，代表请求已被接受，需要继续处理。这类响应是临时响应，只包含状态行和某些可选的响应头信息，并以空行结束。由于HTTP/1.0协议中没有定义任何1xx状态码，所以除非在某些试验条件下，服务器禁止向此类客户端发送1xx响应。 这些状态码代表的响应都是信息性的，标示客户应该采取的其他行动。 100 - 客户端应当继续发送请求 101 - 切换协议 102 - 处理将被继续执行 2xx成功 这一类型的状态码，代表请求已成功被服务器接收、理解、并接受。 200 ..
Websocket 详解
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
11-17 4651
详细了解websocket及应用
WebSocket与消息推送
Lamb的博客
08-10 3525
Socket又称"套接字"，应用程序通常通过"套接字"向网络发出请求或者应答网络请求。Socket的英文原义是“孔”或“插座”，作为UNIX的进程通信机制。Socket可以实现应用程序间网络通信。Socket可以使用TCP/IP协议或UDP协议。TCP/IP协议TCP/IP协议是目前应用最为广泛的协议，是构成Internet国际互联网协议的最为基础的协议,由TCP和IP协议组成:TCP协议:面向连接的、可靠的、基于字节流的传输层通信协议，负责数据的可靠性传输的问题。
【微信小程序】通过监听 WebSocket 的状态变化来判断Socket是否已经建立连接
资深全栈开发工程师
07-27 1986
在微信小程序中，可以通过监听 WebSocket 的状态变化来判断是否已经建立连接。通过监听上述的状态变化，可以判断 WebSocket 是否已经建立连接。以上就是在微信小程序中判断 WebSocket 是否已经建立连接的方法。属性是否为 1，即可判断是否已经建立连接。通过判断 WebSocket 对象的。，则表示已经建立连接；，则表示未建立连接。
WebSocket的原理,及如何测试websocket是否连接成功
lzf200906306的博客
07-30 1万+
一、WebSocket是HTML5中的协议，支持持久连接；而Http协议不支持持久连接。 首先HTMl5指的是一系列新的API,或者说新规范，新技术。WebSocket是HTML5中新协议、新API. Http协议本身只有1.0和1.1，也就是所谓的Keep-alive，把多个Http请求合并为一个。 二、WebSocket是什么样的协议，具体有什么优点。 首先，相对于Http这种非持久的协议来说，WebSocket是一种持久化的协议。 举例说明： （1）Http的生命周期通过Request
websocket学习笔记
dtbk123的博客
06-20 802
websocket是h5新出的支持全双工的，持久化的协议，它也支持服务器端推送。通常在客户端是通过new创建一个websocket对象 var socket=new WebSocket(url,[protocols]) 不是所有的浏览器都支持websocket协议，它接收两个参数，第一个是通信的url，第二个是协议数组，协议可以是注册协议（已根据RFC6455，向注册协议的正式管理实体IANA正式注册的标准协议），开放协议（广泛使用的标准化协议，如XMPP ），自定义协议。 ws协议有四种状态，通
　websocket
09-12
WebSocket是HTML5下一种新的协议，它实现了浏览器与服务器全双工通信，能更好地节省服务器资源和带宽，并达到实时通讯的目的。WebSocket是一个持久化的协议，通过握手机制，客户端和服务器之间可以建立一个类似于TCP的连接，从而方便它们之间的通信。在WebSocket出现之前，web交互一般是基于HTTP协议的短连接或者长连接。WebSocket是一种全新的协议，不属于HTTP无状态协议，协议名为"ws"。 WebSocket与HTTP的关系是，WebSocket在建立握手时，数据是通过HTTP传输的。但是，在真正传输数据时，WebSocket不需要HTTP协议。不同点是，WebSocket是双向通信协议，可以双向发送或接受信息，模拟了Socket协议；而HTTP是单向的，浏览器发起向服务器的连接，服务器预先并不知道这个连接。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值