美文网首页
超简单的websocket,不要再说你没有写过了

超简单的websocket,不要再说你没有写过了

作者: 林哥学前端 | 来源:发表于2020-01-02 15:49 被阅读0次

最近我遇到一个情况,有个需求前端需要写一个websocket,有个朋友说:“我没写过,你来写吧”
这么简单的websocket,就不要以没写过为借口了
下面我来写一个最简单的例子

0.先写一个简单服务端,这里只是为了启动一个websocket服务,实际中肯定不会让前端同学来写服务端的

const koa = require('koa2')
const webSocket = require('koa-websocket')

const app = webSocket(new koa())

app.listen(8080)

app.ws.use((ctx, next) => {
  ctx.websocket.on('message', msg => {
    ctx.websocket.send('收到你的消息:' + msg) // 收到的消息再发回去
  })
  ctx.websocket.on('close', msg => {
    const index = ctxs.indexOf(ctx)
    ctxs.splice(index, 1)
  })
})

这样就用koa2启动了一个websocket服务,做的事也很简单,就是把收到的消息再发送给客户端

1.看看客户端怎么写

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
  </head>
  <body>
    <input type="text" id="msgInput" />
    <button type="button" id="sendBtn">发送</button>
    <script>
      ;(function() {
        const ws = new WebSocket('ws:localhost:8080')

        ws.addEventListener('open', () => {
          console.log('open')
          console.log('你发送消息:hello')
          ws.send('hello')
        })

        ws.addEventListener('message', msg => {
          console.log(msg.data)
        })
        ws.addEventListener('error', () => {
          console.log('error')
        })
        ws.addEventListener('close', () => {
          console.log('close')
        })

        const sendBtn = document.getElementById('sendBtn')
        const msgInput = document.getElementById('msgInput')
        sendBtn.addEventListener('click', function() {
          console.log('你发送消息:' + msgInput.value)
          ws.send(msgInput.value)
        })
      })()
    </script>
  </body>
</html>

首先,通过new WebSocket('ws:localhost:8080')连建立连接

const ws = new WebSocket('ws:localhost:8080')

接下来就是监听websocket的通信事件就行了
先监听连接成功的事件

ws.addEventListener('open', () => {
      console.log('open')
      console.log('你发送消息:hello')
      ws.send('hello')
})

这里连接成功后,ws.send('hello')是向服务端发了一条消息,hello

监听message,就是收到服务端消息的事件

ws.addEventListener('message', msg => {
      console.log(msg.data)
})

然后监听error和close,错误和关闭事件,实际中要做相应的处理

ws.addEventListener('error', () => {
      console.log('error')
})
 ws.addEventListener('close', () => {
      console.log('close')
})

下面代码是,点击按钮时,我们把input里面的内容发送给服务端,用的也是ws.send方法

const sendBtn = document.getElementById('sendBtn')
const msgInput = document.getElementById('msgInput')
sendBtn.addEventListener('click', function() {
     console.log('你发送消息:' + msgInput.value)
     ws.send(msgInput.value)
})

这样一个最简单的websocket就完成了,其实没有任何难点,按照api调用就行了

相关文章

网友评论

      本文标题:超简单的websocket,不要再说你没有写过了

      本文链接:https://www.haomeiwen.com/subject/fldooctx.html