百度t7 课程， websocket 实现简单聊天室
程序员文章站
2022-03-10 12:16:36
...
最简单的聊天室，我写了一个小时，
写了10 分钟，调试50分钟
因为 我是小菜鸟，不过凡事都有过程
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<!-- 基本小样式 -->
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
ul li p{
background: #ccc;
color:white;
}
ul li h1 {
color:#bfa;
}
</style>
<!-- 1, 引入socket.io -->
<script type="text/javascript" src="http://localhost:3000/socket.io/socket.io.js"></script>
<script type="text/javascript">
'use strict'
let nameVal ='';
window.onload =function(){
let oP = document.getElementById('p1');
let content = document.getElementById('content')
let Obtn= document.getElementById('send')
let oUl = document.getElementById('oUl')
let name = document.getElementById('name')
let psw = document.getElementById('psw')
let login = document.getElementById('login')
function addLi(msg,name){
let nameVal2 = nameVal;
if(name!=''){
nameVal2 = name;
}
let oLi = document.createElement('li')
oLi.innerHTML= `<h1>${nameVal2}</h1>
<p>${msg}</p>`
oUl.append(oLi)
}
// 连接服务器端：// 后端保存socket 地址：
let sock=io.connect('ws://localhost:3000/');
login.onclick = function(){
nameVal = name.value;
let pswVal = psw.value
sock.emit('login',nameVal)
}
Obtn.onclick = function(){
let msg= content.value;
if(msg==''){
alert('消息不能为空')
return;
}
addLi(msg,nameVal)
console.log(nameVal)
sock.emit('msg',msg,name.value)
}
sock.on('msg',function(msg,nameVal){
addLi(msg,nameVal)
})
}
</script>
</head>
<body>
<h1>欢迎来到主页！！</h1>
<input type="text" id="name"></input><br>
<input type="text" id="psw"></input><br>
<input type="button" value="login" id='login' />
<textarea id="content" value="" rows="10" cols="50">
</textarea>
<button id ="send"> 发送消息</button>
<ul id="oUl">
<li>
<h1 >action</h1>
<p>action is power!!</p>
</li>
</ul>
</body>
</html>2, 后端hello.js
let http = require('http')
let fs = require('fs')
let io = require('socket.io')
let server = http.createServer(function(req,res){
fs.readFile(`public/index.html`, (err, data)=>{
if(err){
res.writeHeader(404);
res.write('not found');
}else{
res.write(data);
}
res.end();
});
})
server.listen(3000)
let server2 = io.listen(server)
let sockets = [];
let currentName = '';
server2.on('connection',function(socket){
console.log('socket link success!')
sockets.push(socket)
socket.on('login',function(username){
currentName= username;
console.log('login success')
console.log('currentName',currentName)
})
socket.on('msg',function(msg,nameVal){
// 消息拿到之后，就可以循环发送了！
console.log(msg , nameVal)\
// 信息到这里没问题！
// 过滤的操作
let otherSocket = sockets.filter(item=>item!=socket)
for(let i = 0;i<otherSocket.length;i++){
otherSocket[i].emit('msg',msg,nameVal)
}
})
})
最后显示效果
总结，我没有进行页面优化，比如是自己写的一个样式
不是自己写的另外一个样式，这些无非就是className 切换
其实逻辑很简单
就是 后台接收消息，然后转发就行了！
一个for 循环 的事情！
用人话，就是后台， 来一个请求，我就把你存进数组中， 当你向发消息时，我就把
挨着牌的向数组中的sock 进行转发就行了！
这次练习，不在于你写多了，在于你要养成敲代码的感觉！
下一篇： Redis的发布订阅