浏览器使用WebSocket实时通讯

admin · 发表于 2018-6-23 19:36:00

如果你要有一个支持 WebSocket的服务器（Java、Php等），可以在浏览器中使用一个新的WebSocket服务协议，来打开一个链接：

var socket = new WebSocket("ws://172.0.0.1:8080/SpringWebSocketPush/websck");

复制代码

与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
1 h& c8 s; ^1 i7 b- ?2 d
+ Q; E9 _( r) {! S' t- @. n( I0 {9 e: g" M
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
# C6 ]! q# Q- T9 |7 i
}8 v" {* k, s. [% k; N
% m8 L# N0 w, k2 E6 M( \* U/ V
socket.onmessage = function(){4 E# z% D; v, E' H2 F/ u( r c# s! _
//在event.data消息数据
# c3 H5 [4 u* |
}5 |7 ]3 o8 |, j, U
; i: O4 f+ R" o* h# m) j: N* y* z
socket.onclose = function(){
1 s0 z- K/ {7 x
//关闭WebSocket
1 q; K- s8 U, Y6 s; n6 ?0 u
}
: E3 }# ]( i4 a6 K
6 t' R1 A5 W8 @" `6 E* r/ }: d
socket.onerror = function(){
; B. j6 g, Q9 V$ `. Z7 R* R
//错误触发
" R; r5 G7 [, C" a/ W9 H/ i/ y
}

复制代码

通过套接口发送数据，调用socket.send:

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>6 l o7 e) v7 s: w; b7 E' i& L6 O8 V
<head>
9 |& ^6 y5 i3 n' l9 M- z+ Y
<meta charset="UTF-8">
1 f+ t) S& H# {8 H
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
: ?+ m D5 ] F5 a& V# M
<title>WebSocket</title>3 E: b4 M7 T" `4 c2 d) ]/ G
</head>* X2 p, y' b$ D4 \ ?, M
<body>
4 {0 A3 q; L# D: ~% \$ f# }
</body>
9 c1 j! [4 c( U: A" A: B8 |4 N
<script>" v: A" c; w( u: a& Z% M# A9 \; C: N
var socket;% M- M7 f/ E6 S6 [: s
if (window.WebSocket) {
5 z; i4 Y: c! K) p; I _6 v
socket = new WebSocket("ws://localhost:8080/myapp");* q9 t7 u- Z$ l) G* A( q$ ~( r
socket.onmessage = function(event) {4 W' U/ n$ _1 P. Z( Z' M
alert("Received data from websocket: " + event.data);$ ]9 ~! @; }& u" ~! P ~
}* }% L6 Q# h- _% `2 S4 Z" w
socket.onopen = function(event) {- y0 o0 D" h4 v3 [1 Q/ @! A
alert("Web Socket opened!");
) o7 R) q# R& o l3 p+ X
};" J- D* s ]9 P/ D: E# ?
socket.onclose = function(event) {, Y0 a' b/ n, Y6 g5 l) j/ a4 O
alert("Web Socket closed.");
! h( L% S' N) Z0 u8 N- C6 x& j
};
/ P% Y# Z. t! w* `1 ]0 o3 K' j7 o( o
} else {
2 x' V, a# j. {0 h
alert("Your browser does not support Websockets. (Use Chrome)");
4 l% e1 k' E# q1 n- r1 z" p
}' Q, V2 ^! Z8 H
, d5 B) y4 M3 L* g% z4 C
function send(message) {
) ]# s& \: `2 k* O& R6 ?
if (!window.WebSocket) {6 K* d/ h' B. V w0 E
return;+ r; T0 L* W0 ?; F) q! a
}
5 ~' p( T9 ~' L( p2 u8 C9 O9 q# _# r" f
if (socket.readyState == WebSocket.OPEN) {! M0 W5 q! Q5 q7 D% ^* n
socket.send(message);7 M: S1 H0 `( U O* C0 r
} else {( C2 [! i8 o3 ]7 \
alert("The socket is not open.");
( z n- X" K7 c0 X* K
}+ Z. K$ S0 ~, W7 c4 ]% h
}
5 q, @" \3 f% g1 f1 I
</script>9 m% C3 w' j& R
</html>

复制代码

帐号		自动登录	找回密码
密码			立即注册

[php学习资料] 浏览器使用WebSocket实时通讯