html局域网简易聊天工具
时间: 2023-07-17 22:11:26 浏览: 97
对于创建局域网简易聊天工具,你可以使用 HTML、CSS 和 JavaScript 来实现。以下是一个简单的示例:
1. 创建一个 HTML 文件,命名为 `chat.html`:
```html
<!DOCTYPE html>
<html>
<head>
<title>局域网聊天工具</title>
<style>
#messages {
height: 200px;
overflow-y: scroll;
}
</style>
</head>
<body>
<h1>局域网聊天工具</h1>
<div id="messages"></div>
<input type="text" id="input" />
<button onclick="sendMessage()">发送</button>
<script>
var socket = new WebSocket("ws://localhost:8080");
socket.onmessage = function(event) {
showMessage(event.data);
};
function showMessage(message) {
var div = document.createElement("div");
div.textContent = message;
document.getElementById("messages").appendChild(div);
}
function sendMessage() {
var input = document.getElementById("input");
var message = input.value;
socket.send(message);
input.value = "";
}
</script>
</body>
</html>
```
2. 使用 WebSocket 在局域网中建立一个简单的服务器来处理消息。在命令行中,使用以下命令安装 `ws` 模块:
```
npm install ws
```
3. 创建一个名为 `server.js` 的 JavaScript 文件,并将以下代码复制到文件中:
```javascript
const WebSocket = require("ws");
const wss = new WebSocket.Server({ port: 8080 });
wss.on("connection", function connection(ws) {
ws.on("message", function incoming(message) {
wss.clients.forEach(function each(client) {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
});
```
4. 在命令行中运行以下命令以启动服务器:
```
node server.js
```
5. 使用浏览器打开 `chat.html` 文件,即可在局域网中使用简易聊天工具。
请注意,此示例仅提供了一个基本的框架,你可以根据需要进行修改和扩展。还需要注意的是,此示例没有提供任何身份验证或安全功能,因此仅适用于局域网环境。在实际应用中,建议添加适当的安全措施。
阅读全文