第一步:用node搭建服务器
1.首先通过node安装ws插件,ws:是nodejs的一个WebSocket库,可以用来创建服务。
网页端代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单的聊天室</title>
</head>
<body>
<h1>聊天室</h1>
<ul id="list">
</ul>
<hr>
<textarea id="msg" cols="100" rows="10"></textarea>
<button id="send" onclick="sendMsg()">发送</button>
<input type="file" id="f1" onchange="sendImg()">
<img src="" id="preview" style="width: 100px;height: 100px">
</body>
</html>
<script>
创建一个websocket对象 然后利用对象建立链接
let websocket = new WebSocket("ws://localhost:8080");
链接成功之后可以触发一个事件
initSocket();
step2 监听websocket链接成功的信息
function initSocket(){
websocket.onopen=function(e){ //基于事件的 websocket事件
console.log("哈哈哈哈哈");
websocket.send("hello server");
};
}
step3 在客户端接收服务器发送的数据
websocket.onmessage=function (e) { //e是事件对象
let li = document.createElement("li");
let data = JSON.parse(e.data);
if(data.flag =="txt"){
li.innerHTML=data.data;
}else if(data.flag =="img"){
let img = document.createElement("img");
img.src= data.data;
li.appendChild(img);
}
let list = document.querySelector("#list");
list.appendChild(li);
};
function sendMsg() {
let msg = document.querySelector("#msg").value;
websocket.send(JSON.stringify({flag:"txt",data:msg}));
}
上传图片功能
function sendImg(){
let f1 = document.querySelector("#f1").files[0];
let img = document.querySelector("#preview");
let reader = new FileReader();//文件流
reader.readAsDataURL(f1);
reader.onload = function(e){
console.log(reader.result);
img.src = reader.result;
websocket.send(JSON.stringify({flag:"img",data:reader.result}));
是为了区分发送的是图片还是文 字,方便接受的时候显示
}
}
</script>
服务器端代码如下
const Websocket = require("ws");
const wss=new Websocket.Server({
port:8080
});
创建端口,服务器搭建成功了
websocket的服务器,要监听数据还要推送数据
通过监听ws服务对象来判断是不是和客户端连接成功了
wss.on("connection",(socket)=>{
console.log("链接成功了");
监听客户端发送的数据
socket.on("message",(data)=>{
console.log(data);
点对点的发送
socket.send(data);
服务器向客户端发送数据,socket是双向通道
广播模式就是服务器收到消息以后,给连接本服务器的所有客户端都发送过去,这样可以实现实时的多人聊天
wss.clients.forEach((key,client)=>{ //通过foreach遍历所有的客户端
client.send(data);
});
});
});
console.log("webSocket server is listening on 8080");
上述功能的服务器端部分,可以通过在自己的外网服务器搭建,从而实现真正的实时多人聊天。
友链网站域名更换了,博主能更新下不|´・ω・)ノ,白亮吖雅黑丫:https://m39.wang
哈哈哈
楼主好风采!!!!