体验一下websocket

最新推荐文章于 2024-01-22 10:02:24 发布

Elvisde

最新推荐文章于 2024-01-22 10:02:24 发布

阅读量144

点赞数

分类专栏：前端知识点

本文链接：https://blog.csdn.net/weixin_43264048/article/details/88544108

版权

前端知识点专栏收录该内容

2 篇文章 0 订阅

订阅专栏

近期公司有项目要用websocket实现一些推送的功能。WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议，不存在跨域问题。
服务端node.js
websocket.js文件

var ws=require("nodejs-websocket");     //引入websocket模块
console.log("开始建立连接...");         //后台打印状态信息
var person1 = null,
    person2 = null,
    ready1 = false,
    ready2 = false;
var server=ws.createServer(function(connect){       //创建一个新连接
    connect.on("text",function(msg){        //接收触发事件
        console.log("收到的消息是："+msg);      //接收到新消息之后在后台打印出来
        if(msg === "person1"){
            person1 = connect;
            ready1 = true;
            person1.sendText("person1连接成功")
        }
        if(msg === "person2"){
            person2 = connect;
            ready2 = true;
            person2.sendText("person2连接成功！")
        }
        if(ready1 && ready2){
            name1.sendText(msg);
            name2.sendText(msg);
        }

        // connect.sendText(msg)
    });
    connect.on("close", function(code, reason) {
        console.log("连接关闭")
    });
    connect.on("error", function(code, reason) {

    });

}).listen(8000)
console.log("websocket 建立完毕")

运行node webscoket.js打印出如下信息
在这里插入图片描述
接下来就是两个页面了
websocket1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p>person1</p>
    <button id='send'>发送</button>
    <input type='text' id='inputText'>
    <p id='dispStatus'>正在连接...</p>
 
        <script>
            var inputText=document.getElementById('inputText');
            var dispStatus=document.getElementById('dispStatus');
            var ws=new WebSocket('ws://localhost:8000');    //创建websocket连接，，服务端的IP+端口号
            ws.onopen=function(e){  //开始创建连接时的事件
                ws.send("person1")
            }
 
            ws.onmessage=function(e){   //读取服务端接收到的信息
 
                document.getElementById('send').onclick=function(e){  
                    var time = new Date();
                    var hours = time.getHours();
                    var minutes = time.getMinutes();
                    var seconds = time.getSeconds();
                    var nowTime =hours+":"+minutes+":"+seconds
                    ws.send(nowTime + 'person1=>' + inputText.value);   //向服务端发送输入框中的值
                }
 
                dispStatus.innerHTML+= "<br/>"+e.data;        //将信息显示出来
            }
 
            ws.onclose = function(){
                dispStatus.innerHTM +="<br/>服务器关闭"
            }
 
            ws.onerror = function() {
                dispStatus.innerHTM +="<br/>连接出错"
            }
        </script>
</body>
</html>

websocket2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p>person2</p>
    <button id='send'>发送</button>
    <input type='text' id='inputText'>
    <p id='dispStatus'>正在连接...</p>
 
        <script>
                var inputText=document.getElementById('inputText');    
                var dispStatus=document.getElementById('dispStatus');
                var ws=new WebSocket('ws://localhost:8000');    //创建websocket连接，，服务端的IP+端口号
                ws.onopen=function(e){  //开始创建连接时的事件
                    ws.send("person2")
                }
 
                ws.onmessage=function(e){   //读取服务端接收到的信息
                    document.getElementById('send').onclick=function(e){
                        var time = new Date();
                        var hours = time.getHours();
                        var minutes = time.getMinutes();
                        var seconds = time.getSeconds();
                        var nowTime =hours+":"+minutes+":"+seconds
                        ws.send(nowTime + "person2=>" + inputText.value);   //向服务端发送输入框中的值
                    }
                     
                    dispStatus.innerHTML+= "<br/>"+e.data;        //信息显示
                }
 
                ws.onclose = function(){
                    dispStatus.innerHTM +="<br/>服务器关闭"
                }
 
                ws.onerror = function() {
                    dispStatus.innerHTM +="<br/>连接出错"
                }
            </script>   
</body>
</html>

两个页面都打开之后就可以互相发送消息了。很简单的demo，只是简单的了解一下websocket是干什么的。

Elvisde

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
体验一下websocket

近期公司有项目要用websocket实现一些推送的功能。WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议，不存在跨域问题。服务端node.jswebsocket.js文件var ws=require("nodejs-websocket"); //引入websocket模块console.log("开始建立连接..."); ...
复制链接

扫一扫

专栏目录