基于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,只是我自己嫌慢 嗯 个人爱好 。
这是一个极其简单基础的聊天室,欢迎指正。