<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>WebSocket</title>
</head>
<body><h1> 聊天室 </h1><div id="content" name="name" style="overflow-y: scroll; width: 400px; height: 300px; border: solid 1px #000"></div><br /><div><input type="text" id="msg" style="width: 200px;"></div><button id="submit">发送</button><script src="./wsClient.js"></script><script>document.querySelector('#submit').addEventListener('click', function () {var msg2 = msg.valuews.send(msg2)msg.value = ''}, false)</script>
</body>
</html>
/* 连接服务器*/
const wsPort = 8080
const hostname = '10.31.163.59'
const ws = new WebSocket( `ws://${ hostname }:${ wsPort }` )ws.onopen = () => {// 进入聊天室的提示ws.send( '欢迎xxx来到xxx的直播间' )
}// 接收数据，然后将数据展示到界面上
ws.onmessage = ( msg ) => {const content = document.querySelector( '#content' )content.innerHTML += msg.data + '<br/>'
}// 异常报出// ws.onerror = ( 'error' ) => {
// console.log( error )
// }ws.onclose = () => {console.log( 'closed' )
}
/* 通信的主服务器1. ws模块来创建2. 安装 ws 模块3. 创建服务器
*/const WebSocket = require('ws')
const ws = new WebSocket.Server({ port: 8080, host: '10.31.163.59' })let clients = {}
let clientName = ('connection', (client) => {client.name = ++clientNameclients[client.name] = ('message', (msg) => {console.log(msg)//客户端接受到的信息broadcast(client, msg)})('close', () => {delete clients[client.name]console.log(client.name + ' 离开了~')})
})function broadcast(client, msg) {for (var key in clients) {clients[key].send(client.name + ' 说：' + msg)}
}
/* 给client启动一个静态服务器，用于展示界面
*/const express = require( 'express' )
const path = require( 'path' )
const webPort = 3000
const hostname = '10.31.163.59'const app = express()app.use( express.static( path.join( __dirname,'client')) )app.listen( webPort,hostname, () => {console.log( `The web server is running at: ${ hostname }:${ webPort }`)
})
在Linux命令行安装ws：npm i ws -S；
安装好了再安装express：npm i express -S;
都安装好了之后nodemon监听运行文件就可以啦
本文发布于:2024-01-27 19:03:07，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/17063533862048.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
