使用node简单搭建websocket服务器

背景

我们都知道,http协议通信只能由客户端发起,然后服务端再做出响应;但是websocket协议最大的特点是服务端可以主动向客户端推送消息,客户端也可以主动向服务器发送消息

往常实现双向通信的方法主要是轮询,客户端通过定时器,每隔一段时间就会主动发送请求给服务器,这无疑是会耗很多的流量和给服务端造成资源消耗;而websokcet实时性更强,当服务器和客户端之间交换数据时更少的控制开销。

node搭建websocket服务器

下载websocket依赖  websocket - npm

npm i websocket

在文件下下创建server.js 文件,跟着npm文档的例子引入使用即可

/* server.js 服务器 */

// 引入
const WebSocketServer = require('websocket').server
const http = require('http')
const port = 8000
let time = 0

// 创建服务器
const server = http.createServer((request, response) => {
  console.log(`${new Date().toLocaleDateString()} Received request for ${request.url}`)
  response.writeHead(404)
  response.end()
})
server.listen(port, () => {
  console.log(`${new Date().toLocaleDateString()} Server is listening on port ${port}`)
})


// websocket 服务器
const wsServer = new WebSocketServer({
  httpServer: server
})

// 建立连接
wsServer.on('request', (request) => {
  // 当前的连接
  console.log(request.origin, '=======request.origin=======')
  const connection = request.accept(null, request.origin)
  console.log(`${new Date().toLocaleDateString()} 已经建立连接`)

  setInterval(() => {
    const obj = {
      title: '标题' + time++,
      value: '内容' + time++
    }
    connection.send(JSON.stringify(obj))
  }, 2000)

    // 监听客户端发来的的消息
  connection.on('message',  (message) => {
    console.log('message========>', message)
    if (message.type === 'utf8') {
        console.log('Received Message: ' + message.utf8Data);
        // connection.sendUTF(message.utf8Data);
    } else if (message.type === 'binary') {
        // binary 二进制
        console.log('Received Binary Message of ' + message.binaryData.length + ' bytes');
        // connection.sendBytes(message.binaryData);
    }
  });

  // 监听当前连接 当断开链接(网页关闭) 触发
  connection.on('close', (reasonCdoe, description) => {
    console.log(`${new Date().toLocaleDateString()} ${connection.remoteAddress} 断开链接`)
  })
})

客户端实现

在文件下下新建index.html文件,更多的api介绍可看文档 WebSocket - Web API 接口参考 | MDN

// index.html 

拓展

在服务器重启或是弱网情况下,前端不能保证一直连接成功。因此在出现被动断开的情况下,需要有心跳机制断线重连的功能。

后续单独详说这部分。

websocket使用场景

目前来说,我在工作中用到websocket的主要场景是:需要实时轮播通告用户订阅的消息,实时的图表数据展示。

当然还有应用最广泛的是使用websocekt实现聊天室功能,这个还没玩过,有时间可以试试。

~~~ end ~~~

你可能感兴趣的:(websocket,javascript,前端)