前端通信(socket)
- Node中的net模块提供的前端通信
- H5提供的 webSocket 【 常用于 移动端 】
- pc端低版本浏览器使用 socket.io
服务端:一个总的服务器 例: QQ的服务器(一个整体)
客户端:单个用户使用应用 例:每个人的QQ(多个)
Node中的net模块提供的前端通信
业务: 客户端现在要在终端输入内容,然后回车发送内容给服务器
解决: Node中提供了一个叫做 readline 的 模块用于读取命令行内容 【 单行读取 】
*使用Node创建服务器
//总服务器
//此文件名server.js
const net = require('net'); //引入net模块
const server = net.createServer(); //创建服务器
const host = 'localhost'; //创建域名
const port = 6868; //创建端口号
const clients = {};
let count = 0;
//服务器连接客户端
server.on('connection', (client) => { //服务器通过connection连接客户端
client.name = ++count; //计数,给每一个客户端起名
clients[client.name] = client; //将每一个客户端放入clients中储存起来
//服务器接收信息
client.on('data', msg => {
//服务器通过data事件来接收,客户端发过来的信息;msg 就是客户端发来的信息 , msg这个信息是二进制
console.log(`客户端${client.name}说:${msg.toString()}`);
boardCaster(client, msg);
});
//服务器错误报出处理
client.on('error', error => { // 服务器处理错误报出
console.log('error is: ' + error);
});
//服务器正常下线
client.on('close', () => { // 服务端接收客户端正常下线行为
delete clients[client.name]; // 从存储client的地方删除下线的客户端
console.log(`客户端${client.name}下线了`);
});
});
//广播
// 广播就是将所有的客户端以及客户端发来的信息展示在服务端界面上
function boardCaster(client, msg) {
for (var key in clients) {
clients[key].write(`客户端${client.name}说:${msg.toString()}`); //写信息在服务端
}
}
//监听服务器
server.listen(port, host, () => {
console.log(`服务器运行在:http://${ host }:${ port }`);
})
*创建客户端
//此文件名 client.js
const net = require('net'); //引入net模块,用于创建服务器
const socket = net.Socket(); //创建客户端
const host = 'localhost'; //创建域名
const port = 6868; //创建端口
const redline = require('readline'); //引入raadline模块,读取命令行
//客户端连接服务器
socket.connect(port, host, () => {
socket.write('你好,我上线 了'); //将信息发送给服务器
});
const rl = redline.createInterface({
input: process.stdin,
output: process.stdout
});
socket.on('data', msg => {
console.log(msg.toString());
say();
})
socket.on('error', (error) => { //处理错误报出
console.log('error is : ' + error)
})
socket.on('close', () => { // 客户端正常下线
console.log(`客户端下线了`)
})
function say() {
rl.question('请输入:', (answer) => {
if (answer === 'bye') {
//表示正常下线
socket.destroy() // 客户端销毁
rl.end() // rl 读取命令行关闭
} else {
//表示正常聊天
socket.write(answer)
}
});
}
H5提供的 webSocket【常用于移动端】
WebSocket是HTML5新增的协议,它的目的是在浏览器和服务器之间建立一个不受限的双向通信的通道,比如说,服务器可以在任意时刻发送消息给浏览器。
由于WebSocket是一个协议,服务器具体怎么实现,取决于所用编程语言和框架本身。Node.js本身支持的协议包括TCP协议和HTTP协议,要支持WebSocket协议,需要对Node.js提供的HTTPServer做额外的开发。已经有若干基于Node.js的稳定可靠的WebSocket实现,我们直接用npm安装使用即可。
创建一个简单的聊天室
此为文件目录:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>WebSocket</title>
</head>
<body>
<h1> 聊天室 </h1>
<div id="content" name="name" style="overflow-y: scroll; width: 400px; height: 300px; border: solid 1px #000"></div>
<br />
<div>
<input type="text" id="msg" style="width: 200px;">
</div>
<!-- <button id="submit">提交</button> -->
<script src="weblianjie.js" charset="utf-8"></script>
<script>
var submit = document.querySelector('#submit');
var msg = document.querySelector('#msg');
document.onkeyup = function(e) {
if (e.keyCode === 13) {
ws.send(msg.value);
msg.value = '';
};
};
</script>
</body>
</html>
const url = 'ws://10.31.158.64:8899';
const ws = new WebSocket(url);
ws.onopen = () => { //初次连接
ws.send('刘姥姥初入大观园');
};
ws.onmessage = msg => {
var content = document.querySelector('#content');
console.log(msg);
content.innerHTML += msg.data + '<br/>';
}
const express = require('express'); //引入express
const path = require('path'); //引入path
const app = express();
const port = 9678;
const host = '10.31.158.64';
//指的静态资源目录
app.use(express.static(path.join(__dirname, 'htmljs')));
app.listen(port, host, () => {
console.log(`服务器运行在:http://${ host }:${ port }`);
});
const WebSocket = require('ws'); //创建通信的服务器
const ws = new WebSocket.Server({
port: 8899,
host: '10.31.158.64'
});
let count = 0;
const clients = {};
ws.on('connection', client => {
client.name = ++count; //给每个客户端命名
clients[client.name] = client; //每个客户端输入的信息储存在clients中
//客户端输入的信息
client.on('message', msg => {
//服务器通过message事件来接收客户端发来的信息
console.log(`客户端${ client.name}说:${msg}`);
boardCaster(client, msg);
});
//正常下线
client.on('close', () => {
delete clients[client.name];
console.log(`客户端${ client.name } 下线了`);
});
});
//监听服务器
function boardCaster(client, msg) {
for (var key in clients) {
clients[key].send(`客户端${ client.name }说:${ msg }`);
};
};
注:在引入 express,ws 需通过 npm 下载。
Websocket 使用 ws 或 wss 的统一资源标志符,类似于 HTTPS,其中 wss 表示在 TLS 之上的 Websocket。
ws://example.com/wsapi
wss://secure.example.com/
注:在引入 express,ws 需通过 npm 下载。
Websocket 使用 ws 或 wss 的统一资源标志符,类似于 HTTPS,其中 wss 表示在 TLS 之上的 Websocket。
ws://example.com/wsapi
wss://secure.example.com/