h5实现聊天室

一.创建通信服务端

//这里是建立一个通信的主服务器
// 通信的主服务器
// 1. ws模块来创建
// 2. 安装 ws 模块
// 3. 创建服务器
//
//网络上的两个程序通过一个双向的通信连接实现数据的交换，这个连接的一端称为一个socket

//引入ws模块
const WebSocket = require('ws')

//创建服务器
const ws = new WebSocket.Server({
    port: 8088,
    host: '10.31.158.22'
})

//下面和net-socket基本一样

let member = 0;
const clients = {}

//服务器通过connection连接客户端
ws.on('connection', client => {
    client.name = ++member
    clients[client.name] = client

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

    //客户端下线行为
    client.on('close', () => {
        console.log(`${client.name}号已下线`)
    })
})

//这里封装一个函数用于将客户端发来的信息展示在服务器端

function boardCaster(client, msg) {
    //这里使用send方法
    for (var key in clients) {
        clients[key].send(`${client.name}号说：${msg}`)
    }
}

第二步.建立一个展示聊天界面的静态服务器

//这是第二步，建立一个用于展示聊天室页面的静态服务器 

//犯错： client下文件名称自定义的话，一定记得要加上去

//举例： http://localhost:3000/yyb.html,不写则默认为index.html

const express = require('express')

const path = require('path')

//创建app是为了绑定中间件，调用中间件（函数）
const app = express()

const port = 8000

const host = '10.31.158.22'

// 指定静态资源目录
/* 
  问题： 如果不指定静态资源目录，那么express启动的服务器就认为
         /client/index.html 是一个路由
  解决： 指定静态资源目录
  //path.join这个方法会使磁盘指向当前根目录，即这里的2-h5
*/
app.use(express.static(path.join(__dirname, 'client')))

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

第三步.写聊天室结构

    
    
    
    



    
 聊天室 
    

    

    

        
    
    提交
    
    

第四步.客户端连接通信服务器端

//创建html结构之后，第四步是用来客户端连接通信服务器的

const url = 'ws://10.31.158.22:8088'


const ws = new WebSocket(url)

ws.onopen = () => {
    //初次连接
    ws.send('欢迎来到冷小莫o的直播间')
}

ws.onmessage = msg => {
    var content = document.querySelector('#content')
    console.log(msg)

    content.innerHTML += msg.data + '
'
}