webSocket websocket实时通讯聊天室
websocket
简介
webSoket是HTML5提供的一种在单个TCP连接上进行全双工通讯的协议。
特点：
- 主要优点在于服务端主动向客户端推送数据以及实时通讯。
- 允许服务端主动向客户端推送数据。一次握手动作就创建持久连接，进行双向数据传输。
- 在没有websocket之前采用Ajax轮询(间隔多长时间向服务器发送一次请求),这种方式会造成带宽等资源的浪费，因为http请求包含很长的头部，然而真正有效的数据就那一小部分。
- 基于H5的WebSocket协议，对比传统方式，能更好的节省服务器资源并进行实时通讯。
安装
npm install ws //切记不是websocket
yarn add ws
使用
client API:
创建：var websocket = new WebSocket("ws://localhost:3004");
事件与方法：
- onmessage:当服务器响应数据时触发
- onclose:当连接关闭时触发
- onopen：当连接建立时触发
- onerror:当连接错误时触发
- ws.send(msg):向服务端发送数据
Server API:
安装模块并导入：
- npm install ws
- yarn add ws
- require("ws");
创建服务：new ws.Server({port:3000});
监听连接：ws.on("connection",(client)=>{}); client代表当前客户端,client同样具有以下事件
- onmessage:当服务器响应数据时触发
- onclose:当连接关闭时触发
- onopen：当连接建立时触发
- onerror:当连接错误时触发
- client.send(msg):向客户端发送数据
基于websocket实现一个实时通讯聊天室
client:index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 300px;
height: 300px;
background-color: #ccc;
}
</style>
<body>
<div id="con">
</div>
<input type="text" id="input">
<button id="btn">发送</button>
<script>
var $con = document.querySelector("#con");
var $input = document.querySelector("#input");
document.querySelector("#btn").addEventListener("click", sendHandler);
var websocket = new WebSocket("ws://localhost:3004");
function wsEvent() {
//接收服务器发送的信息
websocket.onmessage = (msg) => {
console.log("server:", msg.data);
$con.innerHTML += "<br>" + msg.data;
};
websocket.onopen = () => {
console.log("建立连接");
};
websocket.onclose = () => {
console.log("关闭连接");
reconnect()
};
websocket.onerror = () => {
console.log("错误连接");
reconnect()
};
};
//开启监听
wsEvent();
//发送消息
function sendHandler() {
console.log($input.value);
websocket.send($input.value);
}
//心跳，业界通用做法
function reconnect(){
if(ws.readyState<2)return;
ws = new WebSocket("ws://localhost:3004");
//开启监听
wsEvent();
}
</script>
</body>
</html>
Server:websocketServer.js
const ws = require('ws');
var websocketServer = new ws.Server({ port: 3004 });
var clientList = {};
var id = 0;
//监听连接
websocketServer.on('connection', (client) => {
client.id = id++;
clientList[client.id] = client;
//send用于发送信息
client.send("welcome to websocket!");
//侦听客户端发送数据
client.on('message', (msg) => {
console.log(msg);
broadCast(client.id+" : "+msg);
})
client.on("close",()=>{
broadCast(client.id+"下线啦");
delete clientList[client.id];
});
//广播
function broadCast(msg){
for(var o in clientList){
clientList[o].send(msg);
}
}
});
效果：
