前端页面与Nodejs使用websocket通信

不要用浏览去直接去访问websocket的地址!!!

不要用浏览去直接去访问websocket的地址!!!

不要用浏览去直接去访问websocket的地址!!!

太傻了。。。

 

就是页面和服务端有个隐藏的通信而已。

 

前端

1、实例化一个ws对象

var wsUri ="ws://echo.websocket.org/";
websocket = new WebSocket(wsUri);

 

2、WebSocket对象一共支持四个消息 onopen, onmessage, onclose和onerror,都是事件触发,不会阻塞

//成功连接后
websocket.onopen = function(evt) {};

//连接失败
websocket.onerror = function(evt) { };

//收到信息后
websocket.onmessage = function(evt) { };

//后端关闭ws的时候
websocket.onclose = function(evt) { };

 

后端

minicap例程里面是用的ws模块

 

注意,ws的所有操作,都要在connection的回调里面执行

 

 

一个例子

后端每隔1.5s给前端发count++;

前端收到后打印出来并返给后端收到了什么

 

收到了

 

 

服务器代码

ws_base.js

只需要启动ws就可以了,不需要绑定服务器

//获取websocket模块
const websocket = require('ws').Server;

const wsServer = new websocket({port:8081});

//与wsServer相关的操作,都必须在connection函数里面操作
//连接成功后会返回一个ws
wsServer.on('connection',(ws)=>{

    let count = 0;

    ws.on('message',(message)=>{
        console.log(message);
    });

    setInterval(()=>{
        ws.send(count++);
    },1500)

});

 

 

前端代码:

ws_front.html

<html>
<head>
    <title>Ws Demo</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
</head>

<body>

    <div>
        <h1 id="show"></h1>
    </div>


    <script>
    
        const ws = new WebSocket('ws://localhost:8081');

        ws.onopen = ()=>{console.log('connect success!');}

        ws.onmessage = (message)=>{
            console.log(message);
            ws.send('收到'+message.data);
        }
            
        
    
    </script>

</body>


</html>

 

转载于:https://www.cnblogs.com/weizhibin1996/p/9328650.html

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值