最新消息:前端博客、web前端博客、Angularjs、javascript、jQuery、HTML5、CSS3

html中使用websocket实现通过实时通功能

JavaScript AZ 1128浏览 0评论

最近因为项目需要,研究了下html5 WebSocket,Firefox 旧版要加上Moz做兼容。

在支持WebSocket的浏览器中,在创建socket之后。可以通过onopen(当websocket创建成功时,即会触发onopen事件),onmessage(当客户端收到服务端发来的消息时,会触发onmessage事件,参数evt.data中包含server传输过来的数据),onclose(当客户端收到服务端发送的关闭连接的请求时,触发onclose事件)即onerror(如果出现连接,处理,接收,发送数据失败的时候就会触发onerror事件)四个事件实现对socket进行响应,其中在open以后可使用内置send方法实现信息发送进行通迅。申请一个WebSocket对象,参数是需要连接的服务器端的地址,同http协议使用https://开头一样,WebSocket协议的URL使用ws://开头,另外安全的WebSocket协议使用wss://开头。

示例demo:

  1. <script type="text/javascript">
  2. var conn = null;
  3. //连接
  4. function openConnection(url) {
  5. if (window.WebSocket) {
  6. conn = new WebSocket(url);
  7. } else if (window.MozWebSocket) {
  8. conn = new MozWebSocket(url);
  9. } else {
  10. alert('您的浏览器不支持WebSocket。');
  11. return;
  12. }
  13. //打开连接
  14. conn.onopen = function() {
  15. console.log('开始发送请求Ping...');
  16. conn.send('Ping...');
  17. };
  18. //失败
  19. conn.onerror = function(error) {
  20. console.log(error);
  21. conn.close();
  22. };
  23. //返回信息
  24. conn.onmessage = function(event) {
  25. var message = event.data; //JSON.parse(event.data);
  26. console.log('服务器返回:'+message);
  27. };
  28. //关闭
  29. conn.onclose = function(event) {
  30. var message = event; //JSON.parse(event.data);
  31. if(message){
  32. conn.close();
  33. console.log("关闭连接");
  34. }
  35. };
  36. }
  37. //断开连接
  38. function disConnection() {
  39. if (conn != null) {
  40. conn.close();
  41. conn = null;
  42. }
  43. }
  44. //初始化
  45. window.onload = function() {
  46. openConnection('ws://echo.websocket.org');
  47. }
  48. //关闭页面
  49. window.onunload = function() {
  50. disConnection();
  51. }
  52. </script>

转载请注明:TUTERM.COM » html中使用websocket实现通过实时通功能

如果您觉得本文的内容对您的学习有所帮助,您可以支付宝(左)或微信(右):
alipay weichat

您必须 登录 才能发表评论!