socket (套接字 包含数据内容) 实现网络通信
网络上的两个程序 通过一个双向的通信连接 实现数据的交互,这个链接的一端称之为 socket
服务器端 socket 功能
- 1、创建 服务器 绑定 IP + 端口 监听端口
- 2、监听 客户端的链接
- 3、监听 客户端发来的消息
- 4、把来自客户端的消息 转发给其他的在线客户端
- 5、监听 客户端的关闭
客户端 socket 功能
- 1、创建 客户端 socket
- 2、连接服务器 的 socket
- 3、发送消息 给 服务器
- 4、接收服务器发来的消息
- 5、监听 服务器 关闭 或者 异常
双向通信 + 互相监听
客户端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>聊天室</title>
<style>
.box {
500px;
height: 300px;
margin: 0 auto;
border: 1px #000 solid;
overflow: auto;
}
#xx {
text-align: center;
}
</style>
</head>
<body>
<div class="box">
</div>
<div id="xx">
**<input type="text" name="" id="txt"><input type="button" value="发送" id="btn">**
</div>
</body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">**
</script>
<script>
var name = '卡卡西';
var str = '';
var scoket = new WebSocket('ws://192.168.53.212:10086');**
scoket.onopen = function () {
scoket.send(`我是${name},我上线了`);
}
**scoket.onmessage = function (message) {
str = `<p>${message.data}</p>`;**
$('.box').html($('.box').html() + str)**
}
// 监听 服务器端 关闭
scoket.onclose = function () {
console.log("服务器已经关闭停止服务...")
}
scoket.onerror = function () {**
**console.log("服务器被黑了...")
}
$('#btn').click(function () {**
scoket.send(`${name}说:` + $('#txt').val());
})
</script>
</html>
服务端代码
const ws = require('ws');
const WebSocketServer = ws.Server;
// 1. 创建 socket 2. 监听端口
const wss = new WebSocketServer({
port: 10086
});
var count = 100;
var info = "WUHAN2002__";
var obj = {};
// 3. 监听客户端的链接
wss.on('connection', function (ws) {
// socket 客户端链接 对象 socket
count++;
ws.name = info + count;
obj[ws.name] = ws;
ws.on('message', function (message) {
fn(message)
})
ws.on('close', function () {
console.log(ws.name + '我下线了...');
delete obj[ws.name];
fn(ws.name + '我下线了...')
})
});
function fn(message) {
for (var i in obj) {
obj[i].send(message);
}
}