web Socket是个全双工的网络协议
本次使用nodejs 配合 nodejs-websocket 进行展示
首先创建后端nodejs的项目,过程跳过,最终我们需要有以下文件,参考以下效果图
先从根目录app.js开始,使用web Socket 需要通过npm安装,yarn或cnpm亦可
npm i nodejs websocket -S
安装了之后,不引入怎么使用呢,所以需要在app.js文件引入
// /app.js文件
const ws = require('nodejs-websocket');
引入之后,创建一个ws服务很简单与创建一个http服务非常类似
// /app.js文件
const ws = require('nodejs-websocket');
const server = ws.createServer(connect => {
//这里是ws创建且执行之后就会立马执行的回调
console.log('new create Web scoket server');
}.listen(2333, () => { //同样需要端口监听,否则怎么知道你是属于服务器的哪个程序
console.log('端口开始监听')
}
客户端这边的基本搭建,要和服务端的ws交互,需要使用webSocket构造对象,传入的参数为字符串('协议webScoket就是ws://ip地址:端口)
<script>
const ws = new WebScoket('ws://127.0.0.1:2333);
</script>
<script>
const ws = new WebScoket('ws://127.0.0.1:2333);
//通过ws这个对象的方法ws.onopen()来监听当前的客户端的ws服务是否已经连接到了服务端的ws服务
ws.onopen = () => {
console.log('ws服务已连接');
</script>
一打开着客户端的网页基本秒打印这段话的了👇
image.png
我们来尝试写一个简单又简陋的聊天室
不就是聊天嘛,和QQ微信那样需要基本的发送和接收,那么以客户端为例,该怎么发送东西给服务端呢?
请看下面代码即清楚👇:
<!-- public/index.html -->
<body>
<input type="text" id="content" />
<button id="sendBtn" >发送</button>
<script>
//这里为上一步的客户端代码(忽略).....
//得要在已经连接到服务端的情况下才能发送给服务端才行,所在要在onopen的回调下写发送
const content = document.querySelector('#content');//输入框的文本
const sendBtn = document.querySelector('#sendBtn');//发送按钮
ws.onopen = () => {
sendBtn.onclick = () => {
//发送文本给服务器的方法:ws.send()
ws.send(content.value);
}
}
</script>
</body>
客户端在的发送这里已经基本写完了,很简单,我们再来看一下服务端怎么接收的
// /app.js文件
const ws = require('nodejs-websocket');
const server = ws.createServer(connect => {
console.log('new create Web scoket server');
//connect这个参数是代表某个当前连接到服务端的对象
//只要是监听有关的都是on()方法
//比如监听客户端发来的文本消息括号第一个参数就是text,顾名思义就是文本,第二个就是回调了,回调里的参数就是客户端发过来的消息(字符串)
connect.on('text', msg => {
console.log(msg)
})
}.listen(2333, () => {
console.log('端口开始监听')
}
在运行服务端app.js的时候可能会报错
image.png
解决办法给它一个监听错误的方法就行了,一想到监听你会想到谁???
没错,还是on方法!
connect.on('error', err => {
//效果图就不展示了
console.log(log)
console.log('ws服务器发生故障')
})
GIF.gif
const ws = require("nodejs-websocket");
const server = ws
.createServer((connect) => {
console.log("new create Web scoket server");
connect.on("text", (msg) => {
console.log(msg);
});
connect.on("error", (err) => {
console.log("ws服务器发生故障");
});
// !从这里开始看
//一个定时器,到点发消息给客户端
setTimeout(() => {
connect.sendText('不在,滚,再问打死你');
}, 3000);
})
.listen(2333, () => {
console.log("端口开始监听");
});
服务端写好发送,客户端也要写接收否则是收不到的
<script>
const ws = new WebSocket('ws://127.0.0.1:2333')
const content = document.querySelector('#content');
const sendBtn = document.querySelector('#sendBtn');
ws.onopen = () => {
sendBtn.onclick = () => {
ws.send(content.value);
}
}
// !从这里开始看
//使用onmessage监听服务端发来的消息,e是代表一个事件对象包含了服务端发来的消息(字符串)
ws.onmessage = e => {
console.log(e);
console.log(e.data);
}
</script>
GIF2.gif
