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");
复制代码
( u6 M+ C; ?3 ~与http://这一URL 前缀等价的WebSocket 前缀 是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
4 R9 a- a6 Y+ @* r
& u4 @; d/ `) v" j5 A) ?5 F% P& M& C' p
该套接口对象有四个用来监听套接口事件的回调:
- socket.onopen = function(){ //打开
T* E8 M) h6 `9 `! w - }
& d+ G3 |$ }& w U6 a - - J7 n# p6 D" n8 V
- socket.onmessage = function(){
& C3 Q4 |8 u m' E* T - //在event.data消息数据7 ?& m1 ] `- {$ T$ s
- }! n1 A {: m* z" e& O1 w
- 8 _+ T" f: `8 \) S0 e
- socket.onclose = function(){7 M4 b4 Z9 A: x, h! I2 A
- //关闭WebSocket/ e* n/ V7 R3 p2 K$ o: h: T" ?3 }
- }( S* X9 J0 Q8 c8 ~ P
# P5 f _( y' }4 x- socket.onerror = function(){
) b( y1 b- i& r- H - //错误触发" n, f8 f. H6 i2 z7 E
- }
复制代码 , I% W0 v* X: Y
5 W' H5 N& h/ Y# i通过套接口发送数据,调用socket.send:
: N7 o1 r( K5 [0 c! Y4 j( a
# P6 i$ S) y2 F" G+ W# j6 H& k) y" l& B4 }. N/ Q7 n: s d. m+ }- }
代码附上:
- <!DOCTYPE html><html>9 I2 `6 T6 S$ N6 |. N
- <head>
8 N F; A5 k5 a) @8 k: d - <meta charset="UTF-8">* \& _( ]+ S, ]1 F# S' o
- <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">$ [- Z% m! |3 d% w7 o$ S2 @
- <title>WebSocket</title>/ H Q0 h- c9 z. y+ X# _% y
- </head>; i R# Y1 P% N( T& T7 {" e
- <body>
' [* p0 L- [1 r+ |/ O& c; w+ p - </body>
. A" t9 J& E d - <script> h, P7 f+ H5 o8 k* R/ P! d1 l
- var socket;- v/ Q* T Y8 A% j1 b
- if (window.WebSocket) {
$ B0 c+ l8 t. u2 T) y3 P- b - socket = new WebSocket("ws://localhost:8080/myapp");
5 c( D% O/ d% Y7 Z9 Z - socket.onmessage = function(event) {
; V8 }1 Y$ h) f, y1 q" C' Y6 Q - alert("Received data from websocket: " + event.data);/ Q4 C4 N; X& H' C _. h
- }
S; o2 l' O8 }! s - socket.onopen = function(event) {/ g' z4 f' J7 f$ o3 q5 @6 u
- alert("Web Socket opened!");8 A( L& Y# h* m' y9 B ?
- };! M" y& K# g7 c" s
- socket.onclose = function(event) {1 Q7 _/ a5 X) k6 G8 q! @
- alert("Web Socket closed.");
' d. F' T) g3 o9 g - };
0 f" P2 s/ V7 J2 ?+ A0 D s - } else {$ `" W5 k+ }% U- i5 o6 ]' M6 }, M: R
- alert("Your browser does not support Websockets. (Use Chrome)");- Z! ]* ?4 [* k3 `7 p( F* H
- }% E% U$ {2 O. {% o# w! q
0 R3 R9 L& f" R' |- H1 h; B R+ |- function send(message) {" z; W. B- P8 ]; K6 ]9 b* Q, K' o
- if (!window.WebSocket) {
. B; p# s9 ]6 n. R0 d0 I - return;2 D' P. Y* c5 c. ]3 i) E7 ^. J3 ]% |
- }+ }1 T$ ] W( R# F$ B
- if (socket.readyState == WebSocket.OPEN) {
/ L+ i3 K9 D# d7 v" B - socket.send(message);
# @! a# r: G$ w$ D X/ E - } else {
/ R5 Q2 L/ g2 y8 v - alert("The socket is not open.");
$ e" k) c3 P9 |4 E - }5 |4 y, V6 c. t
- }! U2 N r& f. a
- </script>
1 p1 M0 h4 C' O7 U- g a - </html>
复制代码
8 U( e V) u r$ _; ^! L5 G
) K9 I3 x4 N/ s& D, L' p j# O8 e* O
2 B7 H# n* V, ]0 d
| 欢迎光临 cncml手绘网 (http://www.cncml.com/) |
Powered by Discuz! X3.2 |