websocket入门示例

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据，可以取代以前的Ajax轮询，节约带宽和服务器资源，更好地进行实时通讯。

1.客户端使用方法

// 创建一个websocket连接
let ws = new WebSocket(config.websocketUrl)
// 事件监听
// onopen - 建立连接时触发
// onmessage - 接收到数据时触发
// onerror - 错误时触发
// onclose - 关闭时触发
ws.onopen = function (e) {
  console.info('connect success！')
}
ws.onmessage = function (e) {
  console.info('recive....')
  let data = JSON.parse(e.data)
  console.info(data) // 获取服务端发来的数据
}
// 发送数据
let value = {
  name: this.name,
  message: this.message
}
ws.send(JSON.stringify(value))

// 关闭
ws.close()

2.node.js搭建websocket服务端

需要先安装nodejs-websocket。

var ws = require('nodejs-websocket');

console.info('start connect...')

var server = ws.createServer(function(conn){
  conn.on('text', function(data){
    console.info('recived:' + data)
    broadcast(data)
  })

  conn.on('close', function(code, reason){
    console.info('close')
  })

  conn.on('error', function(code, reason){
    console.info('error')
  })
  
}).listen(8002)

console.info('connect ok')

// 广播消息-即给所有连接发送消息，实际使用中可以根据发送的id区分
function broadcast(data){
  server.connections.forEach((conn)=>{
    conn.sendText(data)
  })
}

3.基于websockt的简易即时聊天案例

使用node.js搭建了websockt服务，监听来自于客户端的消息并发送给所有建立连接的客户端(相当于消息转发中心)，

前端使用vue完成，把消息发到服务器，同时监听来自服务器的消息并进行相应的展示，后续会把案例放到Github。