websocket用法，以及vue+node实现聊天室

什么是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)