0
点赞
收藏
分享

微信扫一扫

html5 websockt 示例




示例演示:你每次输入hello 然后点【发送】,页面上的数字就+1


结果如图:





代码如下:



<html> 

<head>

<title>WebSoket Demo</title>

<script type="text/javascript">

//浏览器不支持 websocket



if (!window.WebSocket) {

alert("WebSocket not supported by this browser!");

}

var wsutil = {

join: function() {

this._ws=new WebSocket("ws://localhost:8080/ws/counter/");

this._ws.onopen=this._onopen;

this._ws.onmessage=this._onmessage;

this._ws.onclose=this._onclose;

},

_onopen: function(text){

wsutil._send(text);

},

_send: function(message){

if (this._ws)

this._ws.send(message);

},

_onmessage: function(m) {

var valueLabel = document.getElementById("valuetime");

valueLabel.innerHTML = m.data; },

_onclose: function(m) {}



};





function sendmethod(){

wsutil._onopen("hello")

}

</script>

</head>

<body οnlοad="wsutil.join()">

发送hello的次数:<div id="valuetime"></div>



</br>

<input type="text" id="msg" value="" />

<input type="button" value="发送" id="send" οnclick="sendmethod()"/>

</body>

</html>


后台java代码:

public static Long i=0l;


@Override

public void onMessage(String data) {

System.out.println(data);

if ("hello".equals(data)) {

try {

i=i+1;

con.sendMessage(i.toString());

} catch (IOException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

}

}


  • ​​

    html5 websockt 示例_javascript

    ​​
  • 大小: 1.6 KB
  • ​​

    html5 websockt 示例_html_02

    ​​
  • 大小: 1.7 KB
  • ​​查看图片附件​​
举报

相关推荐

0 条评论