目录效果index.html文件index.js实现方法效果 index.html文件 该页面主要是渲染聊天界面 <!DOCTYPE html> <html>
该页面主要是渲染聊天界面
<!DOCTYPE html>
<html>
<head>
<title>Socket.io chat</title>
<style>
body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "SeGoe UI", Roboto, Helvetica, Arial, sans-serif; }
#fORM { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
#input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
#input:focus { outline: none; }
#form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages > li { padding: 0.5rem 1rem; }
#messages > li:nth-child(odd) { background: #efefef; }
.message{font-size: 40px;color: skyblue}
.name{font-size: 15px;color: pink}
</style>
</head>
<body>
<ul id="messages"></ul>
<form id="form" action="">
<input id="input" autocomplete="off" name="main" /><button>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script>
let name=prompt("输入用户名");
//拿到用户名后进行非空验证
if(name == '' || name == null){
alert("先输入用户名")
}else {
//初始化socket模块
var socket = io();
socket.emit('name message',name);//向服务器发送消息（用户名信息）
let form = document.getElementById('form');
let inputMain = document.querySelector('input[name="main"]');
form.addEventListener('submit', function(e) {
e.preventDefault();//取消默认提交事件
if (inputMain.value) {//如果文本框中有消息
socket.emit('chat message', inputMain.value);//向服务器发送消息（聊天信息）
inputMain.value = '';
}
});
//渲染服务器端发送的用户名信息（不仅是自己的，还有别的用户的）
socket.on('name message',function (msg){
var item = document.createElement('li');
item.classList.add("name")
item.textContent = msg;
messages.appendChild(item);
})
//渲染服务器端发送的聊天信息（不仅是自己的，还有别的用户的）
socket.on('chat message', function(msg) {
var item = document.createElement('li');
item.classList.add("message")
item.textContent = msg;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
}
</script>
</body>
</html>
该文件主要用于聊天信息后端处理
const express = require('express');
const app = express();
const Http = require('http');
const server = http.createServer(app);
//引入socket.io
const {Server}=require('socket.io')
const io=new Server(server)
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
io.on('connection',(socket)=>{
let name;
socket.on('name message', (msg) => {
name=msg;
io.emit('name message', name+"已上线");
socket.on("disconnect", (reason) => {
io.emit('name message', name+"已断开");
});
});
socket.on('chat message', (msg) => {
io.emit('name message', name);
io.emit('chat message', msg);
});
})
server.listen(3000, () => {
console.log('listening on *:3000');
});
到此这篇关于node.js用Socket.IO做聊天软件的实现示例的文章就介绍到这了,更多相关node.js Socket.IO聊天内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
--结束END--
本文标题: Node.js用Socket.IO做聊天软件的实现示例
本文链接: https://www.lsjlt.com/news/148504.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0