admin 管理员组

文章数量: 887967

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

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

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

要用到两个插件 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 = ++clientNameclients[client.name] = clientclient.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,只是我自己嫌慢 嗯 个人爱好 。
这是一个极其简单基础的聊天室,欢迎指正。

本文标签: 基于H5的websocket 直播间or聊天室