先搭建一个本地的服务器
创建一个工作目录
$ npm init //生成配置文件
$ npm install express --save //目录下安装 Express 并将其保存到依赖列表中。
###环境配置好后安装WS包
// 后台需要安装ws包
npm i ws -S
创建目录结构
新建文件夹 ws
新建文件 index.html
新建文件 index.js
文件介绍
<!--index.html-->
<!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>WS</title>
</head>
<body>
<div id="txt"></div>
<input type="text" id="ti" oninput="myFunction()">
</body>
</html>
<script>
function myFunction() {
ws.send($('#ti').val())
}
let $txt = document.querySelector('#txt');
let ws = new WebSocket('ws://localhost:9999'); // 这里对应的端口就是服务端设置的端口号9999
// onopen是客户端与服务端建立连接后触发
ws.onopen = function() {
ws.send('链接成功');
};
// onmessage是当服务端给客户端发来消息的时候触发
ws.onmessage = function(res) {
console.log(res);
// 给DOM元素赋值
$txt.innerHTML = res.data;
};
</script>
js文件
const express = require('express');
const app = express();
app.use(express.static(__dirname));
app.listen(3000);
// =============================================
const Server = require('ws').Server;
const ws = new Server({ port: 9999 }); // 这里是设置服务器的端口号，和上面的3000端口不用一致
// 服务器与客户端进行连接的监听
ws.on('connection', function(socket) {
// 服务器来监听客户端发过来的消息
socket.on('message', function(msg) {
console.log(msg); // 这个msg就是客户端发过来的消息
// 来而不往非礼也，服务端也可以发给客户端数据
socket.send(`这里是服务端对你说的话： ${msg}`);
});
});
开启服务
编译器是VsCode，安装一个Code Runner插件，之后打开index.js文件，然后右键菜单有个Run Code点击即可启动服务。 可以直接通过node来启动，index.js当前目录，直接执行node index.js即可启服务了
##这样一个简单的WebSocket通讯就完成了
