什么是WebSocket:
HTML5开始提供的一种浏览器与服务器进行全双工通讯的网络技术，属于应用层协议。它基于TCP传输协议，并复用HTTP的握手通道。
有以下特点：
- WebSocket可以在浏览器里使用
- 支持双向通信
- 使用很简单
websocket相关知识：
创建 WebSocket 连接 -> new WebSocket(url)
常量 CONNECTING -> 0、OPEN -> 1、CLOSING -> 2、CLOSED -> 3
-
WebSocket.onopen-> 连接成功，开始通讯 -
WebSocket.onmessage-> 客户端接收服务端发送的消息 -
WebSocket.onclose-> 连接关闭后的回调函数 -
WebSocket.onerror-> 连接失败后的回调函数 -
WebSocket.readyState-> 当前的连接状态 -
WebSocket.close-> 关闭当前连接 -
WebSocket.send-> 客户端向服务端发送消息
这里服务端用了ws这个库。相比大家熟悉的socket.io，ws实现更轻量，更适合学习的目的。完整的项目建议使用socket.io，或者java中netty等实现。此处用来学习websocket以及相关知识，用这个比较方便。
搭建一个聊天室
前端
- 定义一个socket类：具体注册，发送消息，消息数据格式可以自定义
class Ws{
ws:WebSocket;
allmsg:any[]=[];
constructor(){
this.ws = new WebSocket('ws://localhost:8088');
this.init();
}
//初始化
init(){
this.ws.onopen = function () {
// console.log('ws onopen');
this.send(JSON.stringify({
msg:'from client: hello'
}));
};
let that = this
this.ws.onmessage = function (e) {
let data = JSON.parse(e.data)
switch (data.type) {
case 'all':
that.allmsg.push({
name : data.from,
msg : data.msg
})
break;
case 'login':
if(data.code===0){
console.error(data.msg)
}
else{
console.log(data.msg);
}
break;
default:
break;
}
};
//广播消息
sendall(name:string,data:string){
if(this.ws.readyState===WebSocket.OPEN){
this.ws.send(JSON.stringify({
type:'all',
from:name,
msg:data
}));
}
p2p(to:string,data:string){
...
}
login()
}
- 前端页面：这里简单实现一下
2.1 先来一个注册页面获取一个用户名,随便实现下<div class="login"> <input type="text" placeholder="输入用户名" v-model="username"> <button @click="login">zhuce</button> </div>2.2 聊天页面：
主要就是获取输入内容，发送广播。然后渲染信息
image.png
服务端：
import {WebSocketServer} from 'ws'
const wss = new WebSocketServer({port:8088});
let count = 0;
let users = {};
wss.on('connection',(socket,req)=>{
count++
socket.onmessage = function(e){
let data = JSON.parse(e.data)
switch (data.type) {
case "login":
console.log('-------注册bgein--------');
if(!users[data.name]){
users[data.name] = socket
socket.send(JSON.stringify({
type:'login',
code:1,
msg:`${data.name}注册成功`
}))
}else{
socket.send(JSON.stringify({
type:'login',
code:0,
msg:'用户已存在'
}))
}
console.log('-------注册end--------');
break;
case 'all':
wss.clients.forEach( client =>{
client.send(JSON.stringify({
type:"all",
from:data.from,
msg:data.msg
}))
})
break;
case 'p2p':
break;
default:
break;
}
console.log(e.data);
// console.log(users);
}
console.log(users);
})
wss.on('error',(e)=>{
console.log(e.message);
})
效果
打开三个页面注册三个用户a,b,c
image.png
任何一个人发信息，服务器端都会根据类型返回信息。接收到信息后渲染到页面上
image.png
这里简单介绍websocket的用法，其中数据帧格式，心跳，安全等概论可以参考以下几篇文章。
加起来才15分钟就能看完（手动狗头）
小白10分钟入门Websocket，手把手带你实现一个多人聊天室～ - 掘金 (juejin.cn)
WebSocket：5分钟从入门到精通 - 掘金 (juejin.cn)
demo源码:
点对点传输和文件图片有空也会加上，可能后期不会在使用ws了，功能没有socket.io强大。学习的话比较推荐。希望大佬们能给个赞
Payegen/websocketdemo (github.com)
