cncml手绘网
标题: 浏览器使用WebSocket实时通讯 [打印本页]
作者: admin 时间: 2018-6-23 19:36
标题: 浏览器使用WebSocket实时通讯
如果你要有一个支持 WebSocket的服务器(Java、Php等),可以在浏览器中使用一个新的WebSocket服务协议,来打开一个链接:
- var socket = new WebSocket("ws://172.0.0.1:8080/SpringWebSocketPush/websck");
复制代码 5 }: s% v- Y+ C0 v& i# g+ i
与http://这一URL 前缀等价的WebSocket 前缀 是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 , [ z0 ^9 E+ n1 ]$ B
+ s2 ~/ o7 k9 {5 k
' y" Z/ B( b7 g+ }6 k
该套接口对象有四个用来监听套接口事件的回调:
- socket.onopen = function(){ //打开$ Q: \& f3 Z* y5 G. _! E
- }
6 o3 Q6 U; g, |" k
& Q& U4 i$ U& r& v& P R- F- socket.onmessage = function(){
6 X. X' h- i# G+ A, q" u5 b0 K! B; _ - //在event.data消息数据7 H& |: j: J. C3 b% b8 v1 }
- }
% Z5 m" w6 O6 ^ q2 I+ o - 3 _3 X( U0 u6 e* A6 x- P
- socket.onclose = function(){
1 p2 A3 r' Q$ e4 ^2 I: i9 z - //关闭WebSocket
, a$ K4 o8 F) @5 ~6 p$ H% Y6 R - }
" `( G! S' e+ L/ k; g2 S7 z - 5 m) b2 Y& Q/ P7 K
- socket.onerror = function(){6 p# d& m3 }/ A1 w
- //错误触发3 r2 l( ]4 K0 ^$ ~ U7 |3 z
- }
复制代码
. A1 e% m8 r7 ~5 m; A
& a8 A9 H* \+ D3 \通过套接口发送数据,调用socket.send:
/ \' ]5 w: W6 ^* _9 z4 l- C% }
@ C( K. h: c/ g/ s& L2 n5 F
" Q# f3 [. T4 }4 b3 M5 J代码附上:
- <!DOCTYPE html><html>8 e0 f: g1 G; e: H
- <head>
9 I5 m! a+ I& K2 e - <meta charset="UTF-8">
5 Q0 A6 O3 g; ?; `) m1 f( O" p - <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">% M" ]; Q/ N9 J) `& F2 B# u
- <title>WebSocket</title>
, d) W* @% O, ?7 c8 P - </head>: ~& E" j* P. R; A
- <body>0 E2 L4 k: l) Z8 v; p1 O+ J
- </body>7 ?6 G7 `9 `, f0 P5 ]
- <script>
* u1 L2 I1 P) c) H - var socket;
7 G9 T, q1 C. N! ]/ V3 ~ - if (window.WebSocket) {, [5 I7 J" F0 g* g( C0 G
- socket = new WebSocket("ws://localhost:8080/myapp");
9 L. K+ ~3 k0 r - socket.onmessage = function(event) {8 ~1 L0 l' Z N6 i- |9 y) N
- alert("Received data from websocket: " + event.data);
- k% s1 p! I3 `$ w% h( V* R - }) A8 ~: C7 V9 g3 i
- socket.onopen = function(event) {/ m3 T9 U f2 h3 w/ F( V& b$ ]
- alert("Web Socket opened!");4 R; L1 C# R0 s3 l, F2 {
- };5 p X' k9 q* v9 u) A! o1 y! w
- socket.onclose = function(event) {3 P) Q! \# N$ k" E3 ?& a
- alert("Web Socket closed.");
( T& e1 z$ D3 `, @1 q" o - };
% b* n6 b6 w9 o% L( V9 z+ T - } else {" G9 s0 k; a0 b' b
- alert("Your browser does not support Websockets. (Use Chrome)");
* n' }- f( M2 x* X% _# { - }
! C! ^- A \, W! p; Q: r
( r K7 u+ S% |2 \- function send(message) {6 q k& @! V8 t' n3 P
- if (!window.WebSocket) {8 H; S# n9 O+ j
- return;" v, @# D6 j3 |& Y9 ?6 ?: \
- }
5 r* k; h# V/ m% g; N; V- ~ M - if (socket.readyState == WebSocket.OPEN) {
" B& V% x( n# M v4 C - socket.send(message);
1 w" n9 C# C/ n( ] - } else {, \) J" L6 c* O- w; O
- alert("The socket is not open.");1 X* d2 `0 ^) @* p/ l8 B1 P2 C$ |/ M
- }
3 O) _* N) ]+ E7 | - }' d( k k* b& k% o
- </script>
8 S9 j. p) U" h/ j - </html>
复制代码 - y9 \# A* i; h# r8 e2 H
# r' A8 {1 _: W. z5 O1 |8 ^ z/ W# H5 A5 k7 M" O! l8 [9 X8 K
| 欢迎光临 cncml手绘网 (http://bbs.cncml.com/) |
Powered by Discuz! X3.2 |