首页 > 其他 > 详细

关于前端通信那些事

时间:2019-07-19 00:46:04      阅读:70      评论:0      收藏:0      [点我收藏+]

前端通信 ( 三种 )

  1. Node中的net模块提供的前端通信

  2. H5提供的 webSocket 【 常用于 移动端 】

  3. pc端低版本浏览器使用 socket.io (现在已经不流行了,淘汰了)

  4. 通信

    • 服务端: 总的服务器 举例: 腾讯的qq服务器 1个整体

    • 客户端: 单个用户使用应用 举例: 每个人的qq 多个

Socket

  net模块

  • server.js
/* 
  总服务器
*/
const net = require(‘net‘) //引入net模块,用于创建服务器/客户端
const server = net.createServer() // 创建服务器
const host = ‘localhost‘ // 创建 域名   
const port = 5000 // 创建端口
let count = 0
const clients = {} 

server.on(‘connection‘, (client) => { // 服务器通过connection事件连接客户端
  // client指的是每一个连接的客户端
  // client 是有多个 ,
  // 问题: client会错乱   解决: 起名   数字编号          计数
  client.name = ++count  // 计数,给每一个客户端起名
  clients[client.name] = client // 将每一个客户端放入clients中存储起来

  client.on(‘data‘, msg => { // 服务器通过data事件来接收客户端发来的信息
    // msg 就是客户端发来的信息 , msg这个信息是二进制
    console.log(`客户端${client.name}说:${msg.toString()}`)
    boardCaster(client, msg);
  })

  client.on(‘error‘, error => { // 服务器处理错误报出
    console.log(‘error is: ‘ + error)
  })

  client.on(‘close‘, () => { // 服务端接收客户端正常下线行为
    delete clients[client.name] // 从存储client的地方删除下线的客户端
    console.log(`客户端${client.name}下线了`)
  })
})
// 我们需要将所有客户端发来的信息全部展示在服务器界面上【 聊天室 】  -》 广播
// 广播就是将所有的客户端以及客户端发来的信息展示在服务端界面上
function boardCaster(client, msg) { //广播的函数

  for (var key in clients) {
    // clients[ key ].write( `谁说了什么` ) // 写信息在服务端
    clients[key].write(`客户端${client.name}说:${msg.toString()}`) // 写信息在服务端
  }
}
// 监听服务器
server.listen(port, host, () => {
  console.log(`服务器运行在: http://${host}:${port}`)
})
  • client.js
/* 
  客户端
   业务: 客户端现在要在终端输入内容,然后回车发送内容给服务器
   解决: Node中提供了一个叫做  readline 的 模块用于读取命令行内容 【 单行读取 】
*/
const net = require(‘net‘) //引入net模块,用于创建服务器/客户端
const socket = net.Socket() //创建客户端
const host = ‘localhost‘
const port = 5000
const readline = require(‘readline‘) // 读取命令行
// 客户端连接服务器 
socket.connect(port, host, () => {
  socket.write(‘hello 我上线了‘) // 将一个信息发送给服务器
})

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

socket.on(‘data‘, msg => { // 客户端通过data事件展示信息,然后发送信息给服务器
  console.log(msg.toString())
  say()
})

socket.on(‘error‘, (error) => { //处理错误报出
  console.log(‘error is : ‘ + error)
})

socket.on(‘close‘, () => { // 客户端正常下线
  console.log(`客户端下线了`)
})
function say() {
  rl.question(‘请输入:‘, (answer) => {
    if (answer === ‘bye‘) {
      //表示正常下线 
      socket.destroy() // 客户端销毁
      rl.end() // rl 读取命令行关闭
    } else {
      //表示正常聊天
      socket.write(answer)
    }
  });
}

 

  websocket模块
  • wsServer.js
/* 
  通信的服务器
*/
const WebSocket = require( ‘ws‘ ) // 引入ws模块
// 创建服务器
// const ws = new WebSocket( options ) options就是一个对象
const ws = new WebSocket.Server({
  port: 5000,
  host: ‘10.31.158.70‘
}) 
let count = 0 
const clients = {}
ws.on(‘connection‘, client => {
  client.name = ++ count  
  clients[ client.name ] = client 
  client.on(‘message‘, msg => { // 服务器通过message事件来接收客户端发来的信息
    // 这里是用的message事件
    console.log( `客户端${ client.name }说:${ msg }` )
    boardCaster( client,msg )
  })

  client.on(‘close‘, () => {
    delete clients[ client.name ]
    console.log( `客户端${ client.name } 下线了` )
  })
})

function boardCaster ( client,msg ) {
  // 这里是用的send方法
  for( var key in clients ) {
    clients[ key ].send( `客户端${ client.name }说: ${ msg }` )
  }

}

 

  • wsClient.js
/* 
  这个文件是用于客户端连接通信服务器
*/
const url = ‘ws://10.31.158.70:5000‘
const ws = new WebSocket(url)
ws.onopen = () => { //初次连接
  ws.send(‘我进入了xxx的直播间‘)
}
ws.onmessage = msg => {
  var content = document.querySelector(‘#content‘)
  console.log(msg)
  content.innerHTML += msg.data + ‘<br/>‘
}

 

关于前端通信那些事

原文:https://www.cnblogs.com/xia-xia-xia/p/11210522.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!