前端的通信（三种）

前端通信（三种）

1.Node 中 net 模块的前端通信
2.H5提供的 WebSocket 【常用于 移动端】
3.pc端低版本浏览器使用 socket.io
通信
- 服务券：总服务器
- 客户端： 单个用户应用 有多个

Node中net模块的通信

流程

总服务器的创建步骤
1.第一步搭建总服务器
2.引入net内置模块，创建服务器
3.用net的createServer（）方法创建一个服务器
4.server有一个listen的方法用来监听服务器 listen的参数有三个
5.服务器端创建完成之后进行客户端的创建
6.server.on(‘connection’,client=>{}的方法接收客户端发来的消息)
7.客户端可以有多个 所以 要给每个客户端起名 定义一个计数来进行递增
8.定义一个空对象存放多个客户名 const client={} 客户端的起名 用client.name=++count
9.客户端发信息给服务器 服务器需要用 client.on(‘data’,msg=>{})接收
、、、、、、接收多个客户端发来的信息、、、、、、、、
10.处理报错信息：client.on(‘eeror’,(error)=>{})
11.监听客户端的正常下线 client.on(‘close’,()=>{})
12.然后删除下线了的客户
13.我们要接收多个客户发来的消息展示到服务器上 这个过程叫 广播
14.封装一个广播函数 在展示客户消息的地方进行调用

const net = require('net')      //引入内置模块 用于创建服务器
const server = net.createServer()
const host = 'localhost'         // 创建域名
const port = 7070
let count = 0
const clients = {}
server.on('connection', (client) => {       //通过onconnection 事件 连接客户端
        // client 指的是每一个连接的客户端 作为客户端所以是多个的
        // 因为是多个的所以只有一个client的话会引起错乱 因此要给每一个连接的客户端起名
        // 起名一般是用数字编号 对数字进行递增 所以用计数
client.name = ++count //每一个客户端的名字
clients[client.name] = client       //将每一个客户端的名字放入clients中存储起来
client.on('data', msg => {      //接受客户端发来的信息
        // 收到信息过后需要展示 用console.log()
        // msg 就是客户端发来的信息
        // console.log(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]         //删除下线的客户端
console.log(`客户端${client.name}下线了`)
})
})
function boardCaster(client, msg) {         //广播的函数
for (var key in clients) {
// clients[ key ].write( `谁说了什么` )      // 写信息在服务端
clients[key].write(`客户端${ client.name }说：${ msg.toString() }`)      // 写信息在服务端
}
}
        // 我们需要将所有客户发来的消息全部展示在服务器界面上 这个过程叫 广播
        // 广播就是将所有的客户端以及所有客户端发来的信息展示到服务器上 所有的客户端在clients里面
        // 所有的客户端发来的信息 要通过遍历 所有的客户端 才能找到每一个客户端发来的消息
        // 对象的遍历用 for in
server.listen(port, host, () => {
console.log(`服务器运行在：http://${host}:${port}`)
})

客户端创建的步骤
1.还是引用net模块 net模块不仅可以创建服务器还可以创建客户端
2.客户端叫socket net下面的socket创建客户端
3.客户端创建好了要和总服务器进行连接 通过 socket.connect(）与服务器进行连接 域名和端口名一致
4.连接好之后客户端socket有一个socket.write（）的方法写输出给服务器的内容
5.第四步写的东西要在总服务器上显示在服务器端有个server.on(‘connection’,client=>{}的方法接收客户端发来的消息)
、、、、、、、多个客户端给服务端发去消息、、、、
6.Node提供了readLine 用于读取命令行内容 （单行读取）
7.http://nodejs 进行readlinne的代码拿取
8.正常聊天的时候 客户端输出给服务器 通过 socket.write()
9.每次的消息发送通过answer发送 socket.write(answer)
10.正常下线的时候 服务器要关闭 rl.end() 客户端要销毁soket.destroy()
11.自己的客户端也要展示信息 用 socket.on(‘data’,msg=>{}) 里面要执行 say（）
12. 处理报错信息 客户端和服务端都要处理 客户端用：
socket.on(‘error’,(error)=>{}) 这里的报错不能直接抛出
13. 监听客户端正常下线：socket.on(‘close’,()=>{})
14.服务端进行报错处理和监听下线 销毁客户端信息

const net = require('net')
const socket = net.Socket()         //创建客户端
const host = 'localhost'
const port = 7070
const readline = require('readline')        //读取命令行
socket.connect(port, host, () => {
socket.write('hello 我上线了')      //将一条信息发送给服务器
})
        // 官网代码修改如下
const rl = readline.createInterface({
input: process.stdin,
output: process.stdout
});
        // 将下列代码进行函数改写
       // rl.question('What do you think of Node.js? ', (answer) => {//该句可以在命令行        输入按下回车
      // console.log(`Thank you for your valuable feedback: ${answer}`);//按下回车该句      返回
     // rl.close();
    // });
socket.on('data', msg => {
console.log(msg.toString())
say()       //客户端通过data事件展示信息 然后发送信息给服务端
})
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()        //读取命令行关闭
} else {
        // 表示正常聊天
socket.write(answer)
}
});
}

Node.js框架 express

名词解释：

1. req: request 请求
   • req和前台有关 举例： req用来接收前台发来的数据
2. res: response 响应
   • res和后端有关： 举例： 后端返回给前端的结果
3. next: 表示request到response的一个过程
   next决定了请求和响应之间的连通
   req.query 接收前端发来的get请求携带的数据

express通过路由可以发送信息给前台

const express = require('express');
const app = express()
const port = 3020
const host = '10.31.158.57'
app.get('/home', (req, res, next) => {
        // res.send('hello') // 后端返回给前端的一个字符
res.json({
ret: true,
name: 'lisa',
sex: 18
})
})
app.listen(port, host, () => {
console.log(`运行在 http://${host}:${port}`)
})