webSocket模块（即时通讯）demo示例

52yaoer

本帖最后由 52yaoer 于 2019-7-13 15:14 编辑

WebSocket用于在Web浏览器和服务器之间进行任意的双向数据传输的一种技术。WebSocket协议基于TCP协议实现，包含初始的握手过程，以及后续的多次数据帧双向传输过程。其目的是在WebSocket应用和WebSocket服务器进行频繁双向通信时，可以使服务器避免打开多个HTTP连接进行工作来节约资源，提高了工作效率和资源利用率。

点击进入模块详情

WebSocketModule.html

<!DOCTYPE html>
<html>
<head>
<title>Module Develop</title>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<style type="text/css">
html,
body {
height: 100%
}
body {
background-color: #fff;
margin: 0;
}
#wrap {
height: 100%;
position: relative;
}
#header {
padding-top: 20px;
background-color: #5082c2;
height: 44px;
position: relative;
}
#header h1 {
font-size: 20px;
height: 44px;
line-height: 44px;
margin: 0em;
color: #fff;
margin-left: 100px;
margin-right: 100px;
text-align: center;
}
#main {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
}
a.button {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
-webkit-box-align: center;
height: 32px;
margin: 8px;
background-color: rgba(240, 240, 240, 1.0);
border-color: rgba(220, 220, 220, 1.0);
border-width: 2px;
border-style: solid;
}
a.active {
background-color: rgba(240, 240, 240, 0.7);
}
</style>
</head>
<body>
<div id="wrap">
<div id="main">
<input type="text" class="input1" name="url" id="url" size="40" value="wss://ws**.**:443" />
<a class="button" tapmode="active" onclick="addEventListener1()">监听消息事件方法</a>
<a class="button" tapmode="active" onclick="open1()">连接socket</a>
<a class="button" tapmode="active" onclick="send1()">发送消息</a>
<a class="button" tapmode="active" onclick="close1()">关闭socket</a>
<textarea id="deviceid" name="deviceid" cols="30" rows="50"></textarea>
</div>
</div>
</body>
<script type="text/javascript">
var demo = null;
//ws://121.40.165.18:8800
apiready = function() {
demo = api.require('webSocket');
if (!demo) {
alert("请添加模块后编译");
return;
}
}
var demo;
function addEventListener1() {
demo.addEventListener(function(ret, err) {
if (ret.status == true && ret.evenType == 'ReturnData') {
var _deviceid = document.getElementById("deviceid").value;
document.getElementById("deviceid").value = ret.data + "\n" + _deviceid;
} else {
alert(JSON.stringify(ret) + " " + JSON.stringify(err));
}
});
alert("监听设置成功");
}
function open1() {
var _url = document.getElementById("url").value;
if (_url == '') {
alert("地址不能为空");
return;
}
demo.open({
url: _url, //'ws://192.168.1.102:8887/socket'
pingInterval : 1,
pingData : 'ping',
isBtyes : true
}, function(ret, err) {
alert(JSON.stringify(ret) + " " + JSON.stringify(err));
});
}
function send1() {
demo.send({
data: '我是安卓移动手机',
isBtyes : true
}, function(ret, err) {
alert(JSON.stringify(ret) + " " + JSON.stringify(err));
});
}
function close1() {
demo.close(function(ret, err) {
alert(JSON.stringify(ret) + " " + JSON.stringify(err));
});
}
</script>
</html>

复制代码

hackchen

这个 WebSocket 优点不用多次握手，不过就apicloud这种情况，每个win都是一个网页每次都要握手就有点违背了WebSocket的优点了。

lucifer998

你好，想问一下，你那个模块在全局加密的时候能用么，我用原生的websocket，没全局加密就可以，一全局加密就不行了，如果你这个能用我就买了

52yaoer

lucifer998 发表于 2017-11-1 10:53
你好，想问一下，你那个模块在全局加密的时候能用么，我用原生的websocket，没全局加密就可以，一全局加密 ...

可以实现。你可以测试下的。

lucifer998

52yaoer 发表于 2017-11-1 11:24
可以实现。你可以测试下的。

你关闭链接的close我咋试了没效果呀，方便留个联系方式嘛

52yaoer

lucifer998 发表于 2017-11-1 14:48
你关闭链接的close我咋试了没效果呀，方便留个联系方式嘛

qq 176142998

大雯子w

请大佬帮我看看，我看了案例感觉我没有用错啊，就是不出来
html部分:
<p><div class="aui-btn aui-btn-block mycolor" onclick="connectWifi()">连接</div></p>

js部分：
var demo;
apiready = function(){
demo = api.require('webSocket');
demo.addEventListener(function(ret, err) {
      alert('监听返回'+JSON.stringify(ret) + "  " + JSON.stringify(err));

      if(ret.evenType=='Closed'){
      connect();
      }else if(ret.evenType=='Connected'){
      send();
      }else if(ret.evenType=='ReturnData'){
      alert('得到返回数据啦哈哈哈'+ret.data);
      }
});
appInit();

}
//点击连接
function connect(){
  demo.open({
   url : 'ws://192.168.31.225:8080/socket'
  }, function(ret, err) {

   alert('连接成功'+JSON.stringify(ret) + "  " + JSON.stringify(err))
   if(ret.status==true){
      alert('开始发送数据');
      send();

   }else if(err.code=='1'){
      alert('open出错，开始重新连接，报错信息：'+JSON.stringify(err));
      connect();
   }

  });

}

//连接发送数据
function send(){
  alert('进入发送数据方法');
  var backret = -1;
  var err = -1;
  demo.send({
   data : 'ABC192.168.31.211'
  }, function(ret, err) {
if (ret) {
   backret = ret;
   err = err;
   alert('发送成功返回数据'+JSON.stringify(ret) + "  " + JSON.stringify(err));
   return ret;
}else if (err) {
   alert('发送失败'+ JSON.stringify(err));
}

  });
  //30秒内没有收到返回值就重新发送数据
  setTimeout(function(){
if(backret==-1){
   alert('没有得到返回数据继续发送');
   send();
}else{

   alert('终于有返回值啦，返回的是'+JSON.stringify(backret) + "  " + JSON.stringify(err));
   if(backret.status==false){
      alert('再次发送数据的的返回值竟然是false，还是重连吧');
      connect();
   }else{
      alert(backret);
   }

}
  },30000);
}

我的问题是成功连接监听那里没有反应，而且数据发送成功之后，返回数据说“请先调用open接口”，这个接口一开始我就调用了呀，不知道怎么解决，大神有空可以帮忙看一下吗

动力黑马

支持一下，拿云币

晨曦250

这个模块好，逆向发消息，请问楼主可以出一个详细的说明吗？

康哥

话说这个有服务器端吗？