【小沐学前端】基于Protobuf协议的WebSocket通信（javascript+express）-摩杜云开发者社区

1、简介

简单的说 Node.js 就是运行在服务端的 JavaScript。

Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台。

Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境，基于 Google 的 V8 引擎，V8 引擎执行 Javascript 的速度非常快，性能非常好。

2、下载和安装

Node.js 安装包及源码下载地址为：https://nodejs.org/en。

3 开发示例

3.1 例子1：websocket（js+proto）

WebSocket是HTML5新增的协议，它的目的是在浏览器和服务器之间建立一个不受限的双向通信的通道，比如说，服务器可以在任意时刻发送消息给浏览器。任何一方都可以主动发消息给对方。

HTTP协议是一个请求－响应协议，请求必须先由浏览器发给服务器，服务器才能响应这个请求，再把数据发送给浏览器。换句话说，浏览器不主动请求，服务器是没法主动发数据给浏览器的。

WebSocket并不是全新的协议，而是利用了HTTP协议来建立连接。

安装ws库：

npm i ws

user.proto

syntax = "proto3";
package yxy;

message Login {
    required string name = 1;
    required string pwd = 2;
}
message Address{
  string province = 1;
  string city = 2;
  string country = 3;
}

3.1.1 服务端：yxy_wsserver4.js

yxy_wsserver4.js


const protobuf = require("protobufjs");
const PORT = 3000;
const HOST = '127.0.0.1';

protobuf.load("./user.proto", (err, root) => {
    if (err) throw err;
    const LoginMessage = root.lookupType("yxy.Login");

    const WebSocket = require('ws')
    const WebSocketServer = WebSocket.Server;
    const wss =new WebSocketServer({
        port:PORT
    })

    //如果有WebSocket请求接入，wss对象可以响应connection事件来处理这个WebSocket：
    wss.on('connection',function(ws){  //在connection事件中，回调函数会传入一个WebSocket的实例，表示这个WebSocket连接。
        console.log(`[SERVER] connection()`);
        ws.on('message',function(message){
            console.log(`[SERVER] Received:${message}`);
            
            // 解码数据 
            const payload = LoginMessage.decode(message);
            // 在这里处理消息
            console.log(payload);
            // 编码响应 
            const responseData = LoginMessage.encode({
                name: "杨小羊",
                pwd: "111111"
            }).finish();

            const msg = responseData.toString();
            
            ws.send(`ECHO:${msg}` ,(err)=>{
                if(err){
                    console.log(`[SERVER] error:${err}`);
                }
            })
        })
    })
});

运行结果如下：

3.1.2 客户端：yxy_wsclient4.js

yxy_wsclient4.js

const protobuf = require("protobufjs");
const PORT = 3000;
const HOST = '127.0.0.1';

protobuf.load("./user.proto", (err, root) => {
    if (err) throw err;
    const LoginMessage = root.lookupType("yxy.Login");

    const WebSocket = require('ws')
    let ws = new WebSocket('ws://localhost:3000');

    // 打开WebSocket连接后立刻发送一条消息:
    ws.on('open', function () {
        console.log(`[CLIENT] open()`);
        //每隔一秒向服务器发送消息，以便后面每隔一秒收到消息
        setInterval(function(){
            // 编码数据 
            const data = LoginMessage.encode({
                name: "爱看书的小沐",
                pwd: "222222"
            }).finish();

            // 将数据写到连接 
            ws.send(data);
            console.log(`[CLIENT] Send: ${data}`);
        },1000)
    });

    // 响应收到的消息:
    ws.on('message', function (message) {
        console.log(`[CLIENT] Received: ${message}`);
        const loginResponse = LoginMessage.decode(message);
        console.log(loginResponse);
    })
});

运行结果如下：

3.2 例子2：websocket（js+express）

3.2.1 服务端：yxy_wsserver5.js

yxy_wsserver5.js

var app = require('express')();
var server = require('http').Server(app);
var WebSocket = require('ws');

var wss = new WebSocket.Server({
    port: 8080
});

wss.on('connection', function connection(ws) {
    console.log('server: receive connection.');

    ws.on('message', function incoming(message) {
        console.log('server: received: %s', message);
    });

    ws.send('world');
});

app.get('/', function (req, res) {
    res.sendfile(__dirname + '/index.html');
});

app.listen(3000);

在这里插入图片描述

3.2.2 客户端：yxy_wsclient5.html

yxy_wsclient5.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket</title>
    <style>
    </style>
</head>

<body>
    
<script>
    var ws = new WebSocket('ws://localhost:8080');
    ws.onopen = function () {
      console.log('ws onopen');
      ws.send('from client: hello');
    };
    ws.onmessage = function (e) {
      console.log('ws onmessage');
      console.log('from server: ' + e.data);
    };
</script>

</body>
</html>

结语

如果您觉得该方法或代码有一点点用处，可以给作者点个赞，或打赏杯咖啡；╮(￣▽￣)╭ 如果您感觉方法或代码不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O??? 如果您需要相关功能的代码定制化开发，可以留言私信作者；(✿◡‿◡) 感谢各位大佬童鞋们的支持！( ´ ▽´ )ﾉ ( ´ ▽´)っ！！！