socket是什么呢，通俗一点其实就是我们现在的微信，QQ所有的社交软件，所以现在我们把这个功能用简单的代码实现出来。
现在这个呢是一个简单的聊天室，前台运用了index.html和nodejs写出来的一个小型聊天室
- app.js
- 首先需要下载一个
ws
- 首先需要下载一个
/*
* 搭建一个服务
* 等待客户端连接
* 收发消息
* ws
* */
//1: 引入模块
let WebSocket = require("ws");
//2:创建Server类
let WebSocketServer = WebSocket.Server;
//3:socket对象 实例化
let wss = new WebSocketServer({
port: 3001
});
//4:等待连接 收发消息
wss.on("connection",(ws)=>{
console.log("Server ....");
ws.on("message",(event)=>{
console.log(event)
setTimeout(()=>{
ws.send(event)
},500)
})
});
- 然后用简单的index.html运用原生写出简单效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="input" type="text">
<button id="btn">发送</button>
<p id="show"></p>
<script>
let input = document.getElementById("input");
let btn = document.getElementById("btn");
let show = document.getElementById("show");
var ws = new WebSocket("ws://192.168.31.2:3001");
/*如果只是连接的状态 connection 发送不了消息的*/
/*只有open 状态才能发送消息*/
ws.addEventListener("open", function () {
ws.send("hello Server");
});
ws.onmessage = function (msg) {
show.innerHTML += msg.data + "<br>"
};
btn.onclick = function () {
ws.send(input.value);
}
</script>
</body>
</html>
- 然后打开浏览器进行,别人通过你的IP可以和你进行简单的聊天。
第二个聊天室
技术栈 socket.io+index.html+js原生
- 首先下载 socket.io
在将socket.io.js文件下载下来,在你的index.html里面引入进来
- 因为文件太大无法发布记得下载
- server.js
let app = require("http").createServer(handler);
let fs = require("fs");
/*socketio对象*/
let io = require("socket.io")(app);
io.on("connection", (socket) => {
console.log("client 连接了");
socket.on("message", (data) => {
console.log(data);
socket.emit("message",data);
socket.broadcast.emit("message",data);
});
});
function handler(req, res) {
if (req.url === "/") {
res.end(fs.readFileSync("./index.html"));
}
else if (req.url === "/favicon.ico ") {
res.end("");
}
else if (req.url === "/socket.io.js") {
res.end(fs.readFileSync("./js/socket.io.js"));
} else {
res.end("");
}
}
app.listen(3003);
- index.html
- 原生的js操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/socket.io.js"></script>
</head>
<body>
<h1>聊天室</h1>
<input type="text" placeholder="请输入内容" id="input">
<button id="send">发送</button>
<h3 id="status">状态:未连接</h3>
<p id="show"></p>
<script>
let input = document.querySelector("#input");
let send = document.querySelector("#send");
let show = document.querySelector("#show");
let status = document.querySelector("#status");
/*
* 1:建立连接
*
* */
let socket = io.connect("http://192.168.31.2:3003");
socket.on("open",function () {
console.log("连接");
status.innerHTML = "状态:已连接"
});
socket.on("message",function (msg) {
console.log(msg);
show.innerHTML+=msg+"<br/>"
});
send.onclick = function () {
let value = input.value.trim();
if (!value) {
alert("不能为空");
}
/*
* 连接
* 发送消息 和 接收消息
*
* */
socket.send(value);
input.value = "";
}
</script>
</body>
</html>
最后就可以和你的小伙伴聊天了
