基于H5的websocket 直播间or聊天室

要用到两个插件 ws和express 所以先下载插件

//socket server part
//通信的主服务器.ws模块来创建.安装 ws 模块.创建服务器
const WebSocket = require('ws')
const ws = new WebSocket.Server({ port: 你自己的端口号, host: '你自己的ip地址' })

let clients = {}//所有的客户端组成了一个集合
let clientName = 0//非常简单的数字命名

ws.on('connection', (client) => {
    client.name = ++clientName
    clients[client.name] = client

    client.on('message', (msg) => {
        console.log(msg)//输出客户端接受到的信息
        broadcast(client, msg)
    })

    client.on('close', () => {
        delete clients[client.name]
        console.log(client.name + ' 离开了~')
    })
})

function broadcast(client, msg) {
    for (var key in clients) {
        clients[key].send(client.name + ' 说：' + msg)
    }
}

//因为是基于H5的 所以说我们写个静态服务器放客户端主界面
const express = require( 'express' )
const path = require( 'path' )
const webPort = 这个端口号跟其他俩不一样
const hostname = '你自己的IP地址'

const app = express()

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

app.listen( webPort,hostname, () => {
  console.log( `The web server is running at: http://${ hostname }:${ webPort }`)
})

//用作输入的客户端
const wsPort = 你自己的端口号
const hostname = '你自己的ip地址'

const ws = new WebSocket( `ws://${ hostname }:${ wsPort }` )

ws.onopen =  () => {
  // 进入聊天室的提示
  ws.send( '欢迎来到xxx的直播间' )
}

// 接收数据，然后将数据展示到界面上
ws.onmessage = ( msg ) => {
  const content = document.querySelector( '#content' )
  content.innerHTML += msg.data + '<br/>'
}
ws.onclose = () => {
  console.log( 'closed' )
}

开服务器的时候，先开socketserver 再开静态的 Alt+B运行可以打开多个窗口切换 .
自己要是想做绚丽一点的效果的话 可以自己加CSS、JS.
下载插件的命令
cnpm i ws -S
cnpm i express -S
你也可以用npm，只是我自己嫌慢 嗯 个人爱好 。
这是一个极其简单基础的聊天室，欢迎指正。