关于前端聊天室的简单搭建

Node.js框架 express

简介 koa [ express 超集 ]
目标：前端通信的聊天室
● express前端框架
○ 会搭建web服务器
○ 会打搭建应用服务器[ api服务器 ]
○ 改造 (架构思维改造一个基础项目 RMVC)
○ RMVC： R:路由 M:Moudel 数据 V:view 识图 C:controller 控制器

socket

● Node中的net模块提供的前端通信
● H5提供的 webSocket 常用于移动端
● pc端低版本浏览器使用的 socket.io

通信

服务端：总的服务器 举例：腾讯QQ服务器 一个整体
● 客户端：单个用户使用应用 举例：每个人使用的QQ 多个
net模块:用于创建服务器/客户端

案例

// 静态服务器
const express = require(‘express’)

const app = express() //app对象的创建是为了调用中间件,中间件是一个函数

const path = require(‘path’)

const host = ‘10.31.158.20’

const port = 1437

app.use(express.static(path.join(__dirname, ‘client’)))

app.listen(port, host, () => {
console.log(该服务器运行于 http://${host}:${port})
})

搭建一个静态服务器以后再搭建一个 通信服务器

//通信服务器

const WebSocket = require(‘ws’)

const ws =new WebSocket.Server({//创建通信服务器
port: 70,
host: ‘10.31.158.20’
})

let count = 0

const clients = {}

ws.on(‘connection’, (client) => {
client.name = ++count
clients[client.name] = client

client.on('message', (msg) => {//服务器通过message事件来接受客户端发来的信息
    console.log(`客户端${client.name}说: ${msg.toString()}`)
    broadCaster(client, msg)
})

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

})

function broadCaster(client, msg) {
for (var key in clients) {
clients[key].send(客户端${client.name}说: ${msg})
}
}

静态服务搭建完成

/*
这个文件是用于客户端连接通信服务器
*/

const url = ‘ws://10.31.158.20:70’

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 + ‘
’
}

在html中引入这个用于连接通信服务器的文件
var submit = document.querySelector(’#submit’)
var msg = document.querySelector(’#msg’)
// submit.onclick = function () {
// ws.send( msg.value ) //将信息发送通信服务器
// msg.value = ‘’
// }

    document.onkeyup = function (e) {
        if (e.keyCode === 13) {
            ws.send(msg.value)
            msg.value = ''
        }
    }

</script>