websocket通信

最新推荐文章于 2023-05-28 10:05:57 发布

渣渣前端

最新推荐文章于 2023-05-28 10:05:57 发布

阅读量412

点赞数

分类专栏： node 前端文章标签： websocket

本文链接：https://blog.csdn.net/dtbk123/article/details/102149757

版权

前端同时被 2 个专栏收录

74 篇文章 0 订阅

订阅专栏

node

17 篇文章 0 订阅

订阅专栏

h5新增了一个websocket，可以实现客户端和服务器之间的通信，下面来看一下。

首先要在node环境下下载websocket模块，即npm i websocket

var WebSocketServer = require('websocket').server;
var http = require('http');

var server = http.createServer(function(request, response) {
    console.log((new Date()) + ' Received request for ' + request.url);
    response.writeHead(404);
    response.end();
});
//监听3020端口
server.listen(3020, function() {
    console.log((new Date()) + ' Server is listening on port 3020');
});

wsServer = new WebSocketServer({
    httpServer: server,
    autoAcceptConnections: false
});

function originIsAllowed(origin) {
    // put logic here to detect whether the specified origin is allowed.
    return true;
}

wsServer.on('request', function(request) {
    if (!originIsAllowed(request.origin)) {//判断是否同源
        // Make sure we only accept requests from an allowed origin
        request.reject();
        console.log((new Date()) + ' Connection from origin ' + request.origin + ' rejected.');
        return;
    }

    var connection = request.accept(null, request.origin);
    //发送消息
    setTimeout(()=>{connection.send('hhhh',(data)=>{console.log('成功')})},1000)

    console.log((new Date()) + ' Connection accepted.');
    connection.on('message', function(message) {//接收消息
        if (message.type === 'utf8') {
            console.log('Received Message: ' + message.utf8Data);
            connection.sendUTF(message.utf8Data);
        }
        else if (message.type === 'binary') {
            console.log('Received Binary Message of ' + message.binaryData.length + ' bytes');
            connection.sendBytes(message.binaryData);
        }
    });
    //关闭通信
    connection.on('close', function(reasonCode, description) {
        console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' disconnected.');
    });
});

上面的是服务端代码，接下来是客户端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul id="content">

</ul>
<input type="text" id="msg">
<button onclick="send()">发送</button>
<button onclick="close()">关闭</button>
<script>
    var ws=new WebSocket('ws://localhost:3020');
    var inputNode=document.getElementById('msg');
    var list=document.getElementById('content');
    ws.onopen=function(res){
        console.log('连接成功');
        console.log(res);
    }
    ws.onmessage=function(res){
        console.log('有新消息');
        console.log(res);
        list.innerHTML+='<li>'+res.data+'</li>'
    }
    function send(){
        ws.send(inputNode.value);
    }
</script>
</body>
</html>

这样就实现了客户端和服务器通信。接下来看一下多端通信

var wsocket=require('websocket').server;
var http=require('http');
var client=[];
const server=http.createServer((req,res)=>{
    res.end('11');
});
server.listen(6001,()=>{console.log('监听端口')});

var ws=new wsocket({httpServer:server});

ws.on('request',(websockterequest)=>{
    var connection=websockterequest.accept(null,'accepted-origin');
    client.push(connection);
    setTimeout(()=>{connection.sendUTF('hhh',()=>{console.log('发送成功')})});
    connection.on('message',(data)=>{
        if(data.type=='utf8'){
            client.forEach(item=>{
                item.sendUTF(data.utf8Data,()=>{console.log('发送消息')})
            })
        }
    })
    connection.on('close',(reasonable,description)=> {
            console.log('断开了一个连接');

            var index = client.indexOf(connection);
            client.splice(index,1);
        }
    )
    }
)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<button id="btn">发送</button>
<ul></ul>
<script>
    var btn=document.getElementById('btn');
    var input=document.getElementsByTagName('input')[0];
    var list=document.getElementsByTagName('ul')[0];
    var ws=new WebSocket('ws://localhost:6001');
    ws.onmessage=function(msg){
        list.innerHTML+=`<li>${msg.data}</li>`
    }
btn.onclick=function(){
        ws.send(input.value)
}
</script>
</body>
</html>

这样，客户端打开多个网页都可以和服务器端通信

渣渣前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
websocket通信

h5新增了一个websocket，可以实现客户端和服务器之间的通信，下面来看一下。首先要在node环境下下载websocket模块，即npmi websocketvar WebSocketServer = require('websocket').server;var http = require('http');var server = http.createServer(fu...
复制链接

扫一扫