前端通信

1. 通信有两个端

• 服务端
• 客户端

1. Node.js提供的通信方案

 //- 客户端
    // 引入net模块
    const net = require( 'net' )
    
    const socket = new net.Socket() // socket是用于连接客户端和服务端
    
    
    const PORT = 5000
    
    const HOST = '127.0.0.1'
    
    socket.connect(PORT,HOST,() => {
      socket.write('我上线了') // write 是发送给服务端的话
})

设置客户端可见数据

    socket.on('data', (msg) => {
        console.log(msg.toString());
    })
    socket.on('error', () => {
        console.log(error)
    })

设置下线退出效果

socket.on('data', (msg) => {
    console.log(msg.toString());
    say()
})
socket.on('error', () => {
    console.log(error)
})

socket.on('close', () => {
    console.log('下线了')
})

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

function say() {
    rl.question('请输入', (answer) => {
        if (answer === '886') {
            socket.deatroy()
            rl.close()
        } else {
            socket.write(answer);
        }

    })
}

    //服务端
    const net = require( 'net' )

    const PORT = 5000 
    
    let count = 0 // 用于客户端编号，每次连接递增
    
    
    const clients = {} // cosnt也能定义object类型，用于保存客户端
    
    // 1. 创建服务器
    
    const server = net.createServer() 
    
    
    // 2. 连接客户端
    
    server.on('connection',( client ) => { //socket 就是客户端
      // 触发条件： 只要有客户端连接服务器就会自动触发
    
      client.name = ++count
    
      clients[ client.name ] = client 
    
      client.on('data',( msg ) => { //data事件是用来将客户端的信息展示到服务端
       console.log(`${client.name}说:${msg.toString()}`)
        board(msg.toString());
        })
        client.on('error', (error) => {
        console.log(error)
        })
    
        clinet.on('close', () => {
            console.log(`${client.name}下线了`)
            delete clients[client.name]
        })
    
    })
    function board(msg) {
        for (var key in clients) {
            clients[key].write(`${key}说：${msg}`)
        }
    }

    
    // 3. 监听服务器 
    
    
    server.listen( PORT )

2. h5提供的通信方案
   • 新建一个client文件，里面创建html文件,设置要表现的效果
   • $ npm i express -S创建依赖
   • 设置一个静态服务器

const express = require( 'express' )

const app = express()

const PORT = 5000 

const HOST = '127.0.0.1'

const path = require( 'path' )

// 配置静态资源目录
// app.use( express.static(目标目录的磁盘路径))
app.use( express.static(path.join( __dirname,'client')))

app.get('/',(req,res,next) => {
  res.send('你好')
})

app.listen( PORT,HOST,() => {
  console.log( `客户端服务器运行在：http://${ HOST }:${ PORT }` )
})

创建socket服务端

//安装 ws 模块 $ npm i ws -S 
//ws
      它是H5的一个通信协议 
      const WebSocket = require( 'ws' )

const server = new WebSocket.Server({
  port: 8000,
  host: '10.31.153.38'
})

const clients = {}

let count = 0

server.on('connection',client => {
  client.name = ++count 
  clients[ client.name ] = client 
  client.on('message', msg => {
    console.log( msg )
    borderCast( msg )
  })
  client.on('close',() => {
    console.log(`客户端${ client.name }下线了`)
    delete clients[ client.name ]
  })
})

 function borderCast ( msg ) {
   for ( var key in clients ) {
     clients[ key ].send(`客户端${ key }说： ${ msg }`)
   }
 }

在client文件夹里创建socket客户端

将该文件链接进html文件内，并写入事件

const ws = new WebSocket('ws://10.31.153.38:8000') 


// 发送信息

ws.onopen = () => {
  ws.send('欢迎')
}

ws.onmessage = ( msg ) => { // 它是将服务端的信息展示到客户端
  var content = document.querySelector('#content')
  content.innerHTML += msg.data + '<br/>'
}

<script src="./socketClient.js"></script>
<script>
    var submit = document.querySelector('#submit')
    var msg = document.querySelector('#msg')
    submit.onclick = function () {
        var val = msg.value 
        ws.send( val )
        msg.value = ''
    }
</script>