【笔记】原生JS实现WebSocket连接
本文最后更新于 855 天前,其中的信息可能已经有所发展或是发生改变。

很多网站为了实现推送技术,所用的技术都是轮询。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点,即浏览器需要不断的向服务器发出请求,然而HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源。

在这种情况下,HTML5定义了WebSocket协议,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯。

那么,如何用原生JavaScript实现与服务器建立WebSocket连接呢?

第一步,新建文件websocket.js

第二步,拼接出用于连接WebSocket的URL:

const wsuri = `ws://${window.location.host}/message`

第三步,定义用于存放WebSocket对象的变量:

let socket = null

第四步,编写用于初始化WebSocket的函数:

function startWebSocket() {
  socket = new WebSocket(wsuri)
  //监听消息接收事件
  socket.addEventListener('message', onMessage)
  //监听WebSocket连接事件
  socket.addEventListener('open', onOpen)
  //监听WebSocket异常事件
  socket.addEventListener('error', onError)
  //监听WebSockt关闭事件
  socket.addEventListener('close', onClose)
}

第五步,编写事件对应函数:

function onOpen() {
  socket.send('Hello from client')
  sendHeartBeat()
}

function onError(e) {
  console.error(e)
  startWebSocket()
}

function onMessage(e) {
  if (!e) return
  console.log(e.data)
}

function onClose(e) {
  console.log('WebSocket disconnected.', e)
}

关于ReadyState的解释:

ValueStateDescription
0CONNECTINGSocket has been created. The connection is not yet open.(Socket已被创建,但还未完全连接上)
1OPENThe connection is open and ready to communicate.(Socket已经连接,可以通讯)
2CLOSINGThe connection is in the process of closing.(WebSocket正在关闭中)
3CLOSEDThe connection is closed or couldn’t be opened.(连接已经关闭,或者无法连接)

部分内容摘自:

https://baike.baidu.com/item/WebSocket/1953845?fr=aladdin

转载请注明出处!本文链接: https://battlehawk233.cn/post/418.html



评论

    发送评论编辑评论

    |´・ω・)ノ
    ヾ(≧∇≦*)ゝ
    (☆ω☆)
    (╯‵□′)╯︵┴─┴
     ̄﹃ ̄
    (/ω\)
    ∠( ᐛ 」∠)_
    (๑•̀ㅁ•́ฅ)
    →_→
    ୧(๑•̀⌄•́๑)૭
    ٩(ˊᗜˋ*)و
    (ノ°ο°)ノ
    (´இ皿இ`)
    ⌇●﹏●⌇
    (ฅ´ω`ฅ)
    (╯°A°)╯︵○○○
    φ( ̄∇ ̄o)
    ヾ(´・ ・`。)ノ"
    ( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
    (ó﹏ò。)
    Σ(っ °Д °;)っ
    ( ,,´・ω・)ノ"(´っω・`。)
    ╮(╯▽╰)╭
    o(*////▽////*)q
    >﹏<
    ( ๑´•ω•) "(ㆆᴗㆆ)
    😂
    😀
    😅
    😊
    🙂
    🙃
    😌
    😍
    😘
    😜
    😝
    😏
    😒
    🙄
    😳
    😡
    😔
    😫
    😱
    😭
    💩
    👻
    🙌
    🖕
    👍
    👫
    👬
    👭
    🌚
    🌝
    🙈
    💊
    😶
    🙏
    🍦
    🍉
    😣
    Source: github.com/k4yt3x/flowerhd
    颜文字
    Emoji
    小恐龙
    花!
    上一篇
    下一篇