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

1、Node简介

Node.js发布于2009年5月，由Ryan Dahl开发，是一个基于Chrome V8引擎的JavaScript运行环境，使用了一个事件驱动、非阻塞式I/O模型，让JavaScript 运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。

2 Node安装

https://nodejs.org/en

在这里插入图片描述 Node.js发布于2009年5月，由Ryan Dahl开发，是一个基于Chrome V8引擎的JavaScript运行环境，使用了一个事件驱动、非阻塞式I/O模型，让JavaScript 运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。

3、代码测试

3.1 例子1：websocket（html）

3.1.1 客户端：yxy_wsclient1.html

yxy_wsclient1.html

var ws = new WebSocket("wss://echo.websocket.org");
 
ws.onopen = function(evt) { 
  console.log("Connection open ..."); 
  ws.send("Hello WebSockets!");
};
 
ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  ws.close();
};
 
ws.onclose = function(evt) {
  console.log("Connection closed.");
};

3.1.2 客户端：yxy_wsclient1_2.html

yxy_wsclient1.html

// Create WebSocket connection.
const socket = new WebSocket("ws://localhost:8080");

// Connection opened
socket.addEventListener("open", function (event) {
  socket.send("Hello Server!");
});

// Listen for messages
socket.addEventListener("message", function (event) {
  console.log("Message from server ", event.data);
});

3.2 例子2：websocket（js）

3.2.1 服务端：yxy_wsserver2.js

const WebSocket = require('ws');//引入模块

const wss = new WebSocket.Server({ port: 8080 });//创建一个WebSocketServer的实例，监听端口8080

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
    ws.send('Hi Client');
  });//当收到消息时，在控制台打印出来，并回复一条信息

});

3.2.2 客户端：yxy_wsclient2.js

const WebSocket = require('ws');

const ws = new WebSocket('ws://localhost:8080');

ws.on('open', function open() {
  ws.send('Hi Server');
});//在连接创建完成后发送一条信息

ws.on('message', function incoming(data) {
  console.log(data);
});//当收到消息时，在控制台打印出来

3.3 例子3：websocket（js+html）

3.3.1 服务端：yxy_wsserver3.js

yxy_wsserver3.js

var ws = require("nodejs-websocket")
var PORT = 3000

var server = ws.createServer(function (conn) {
	console.log("New connection")
	conn.on("text", function (str) {
		console.log("Received "+str)
		conn.sendText(str.toUpperCase()+"!!!")
	})
	conn.on("close", function (code, reason) {
		console.log("Connection closed")
	})
	
	conn.on("error",function(err){
		console.log('handler error')
		console.log(err)
	})
}).listen(PORT)

console.log('websocket server listening on port ' + PORT)

运行结果如下：

3.3.2 客户端：yxy_wsclient3.html

yxy_wsclient3.html

<html>
<head>
    <meta charset="utf-8"/>
    <title>websocket</title>
</head>
<body>
    Echo test
    <input id="sendTxt" type="text"/>
    <button id="sendBtn">发送</button>
    <div id="recv"></div>
    <script type="text/javascript">
        // var websocket = new WebSocket("ws://echo.websocket.org/");
        var websocket = new WebSocket("ws://127.0.0.1:3000");
        websocket.onopen = function(){
            console.log('websocket open');
            document.getElementById('recv').innerHTML = 'Connected';
        }

        websocket.onclose = function(){
            console.log('websocket close');
        }

        websocket.onmessage = function(event){
            console.log(event.data);
            document.getElementById('recv').innerHTML = event.data;
        }

        document.getElementById('sendBtn').onclick = function(){
            var txt = document.getElementById('sendTxt').value;
            websocket.send(txt);

        }
    </script>
</body>

运行结果如下：

3.3.3 客户端：yxy_wsclient3_2.html

yxy_wsclient3_2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WenSocket</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border:1px solid;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="请输入内容">
    <button>提交</button>
    <div></div>
    
    <script>
        const input = document.querySelector('input')
        const button = document.querySelector('button')
        const div = document.querySelector('div')
        
        //创建WebSocket实例
        // const socket = new WebSocket("ws://echo.websocket.org")
        const socket = new WebSocket("ws://127.0.0.1:3000")
        
        //监听服务是否链接
        socket.addEventListener('open',()=>{
            div.innerHTML = "服务链接成功"
        })
        //button触发点击事件，将input框中的内容发送至websocket
        //查看websocket是否接收到数据：chrome F12打开控制台》Network》WS》echo.websocket.org》messages
        button.addEventListener('click',()=>{
            const value = input.value
            socket.send(value)
        })
        // 将接收到的数据插入到div中
        socket.addEventListener('message',(e)=>{
            console.log(e)
            div.innerHTML = e.data
        })
    </script>
</body>
</html>

运行结果如下：

3.3.4 客户端：yxy_wsclient3_3.html

yxy_wsclient3_3.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>
    <input type="text" placeholder="请输入内容">
    <button>提交</button>
    <div></div>
    <script>
        
        const input = document.querySelector('input')
        const button = document.querySelector('button')
        const div = document.querySelector('div')
        const socket = new WebSocket('ws://127.0.0.1:3000')

        socket.addEventListener('open',()=>{
            div.innerText = "欢迎来到聊天室"
        })
        button.addEventListener('click',()=>{
            const value = input.value
            socket.send(value)
            input.value = ''
        })
        
        socket.addEventListener('message',(e)=>{
            //div.innerText = e.data //这种方法会覆盖原先的数据
            const dv = document.createElement('div')
            dv.innerText = e.data
            div.appendChild(dv)
        })
    </script>
</body>
</html>

在这里插入图片描述

结语

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