浏览器使用WebSocket实时通讯

admin · 发表于 2018-6-29 14:55:21

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

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

复制代码

# y& a- R1 l$ {/ h* d5 B/ O
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
$ [' b" z. _" l( r3 ~$ { j# D( \. u# D7 _9 V/ X6 q

# C0 c& `( O6 U' V. u5 T8 o该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
4 X3 A) l8 X' x* C6 g6 l2 r
}8 B* i& H, n& T# x: \3 u7 E
//打开
1 X# G k7 V; a i, s
; ]4 \4 [. @6 Z, s2 ]( q6 N
}
# f: E: i: u# j t( M2 ?
) w, I2 @0 ^2 O
4 m! k! |1 F, \- ~8 P
socket.onmessage = function(){
6 a6 ]3 H, U6 N4 w1 r
% \- F: T9 n& T2 E3 K) _
//在event.data消息数据! s* q6 X( I9 g
5 _/ U K, v. J9 d
}
, {- I2 t8 U+ ]* ^+ w9 G: K
* f% }/ u5 R' B2 U8 S3 t- l2 P8 {
socket.onclose = function(){) j- r* n2 d! m* E; J" s5 J8 [
9 e3 A. G; u0 P( n7 v9 j% ]
//关闭WebSocket
0 o$ L2 L; @' Y6 d; }) I6 V
) a3 r. O0 d! K0 T4 ~
}
- z6 W2 A& T+ V1 I2 Z
" L* b0 [( ]' i O4 H+ m
socket.onerror = function(){/ { V9 X) T8 ^ s# d
% L0 n" s6 E6 P6 _* G, r
//错误触发
4 [, p% G7 Y1 |" r) x) M
! P2 O& m* @! l( A! q& f$ u+ E
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
C; M# S. _1 X9 o
<html>
/ g: I* x9 Q/ J7 D+ F8 V
' p' a& {# A! P( m7 }9 R/ L
<head>; g' |0 u% ~6 `
<meta charset="UTF-8">
9 T8 j+ }/ c v$ Q0 S4 C% G
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
$ i6 }) ]' E3 q
<title>WebSocket</title>
1 w/ F3 C% [3 U
</head>
# v) ~/ @9 y' k |1 }
% }1 K/ ?7 ?8 ?; Z b
<body>
9 }% v- y% H' ~8 n
</body>8 P2 T" `2 Z. s+ |9 R
<script> g* y( Z5 f) f# A, p
var socket;
: |2 W, L2 s3 w( S
if (window.WebSocket) {+ |! N5 S! u7 H2 u: R
socket = new WebSocket("ws://localhost:8080/myapp");* G& r, O: d8 t t7 p6 M% Z8 M
socket.onmessage = function(event) {
% c3 ]1 T2 p4 w/ ~6 U
alert("Received data from websocket: " + event.data);
, X& e# `; [/ {. e8 S/ o `5 A8 C
}
' c: h( x" X+ |5 Q
socket.onopen = function(event) {
* U, V+ B* {9 Z' }! x
alert("Web Socket opened!");
: ?2 i. h: u/ l; F9 I( t
};& q5 T. F. x2 `
socket.onclose = function(event) {- u+ t+ P- H2 Z+ H9 T$ D
alert("Web Socket closed.");
3 W' x9 W- B, V2 v7 d& X) o% @# m
};
. w( x& T6 m9 T [+ y3 l* ~2 f
} else {
! c: P/ q: M T& R
alert("Your browser does not support Websockets. (Use Chrome)");4 ]2 `4 V8 y$ S! ?) {4 _' f
}& y4 f3 r# k1 z1 d7 ?- ~. z% ?
" r1 U5 m( f) [! m) h( a
function send(message) {
( `; H4 D& H1 U: [% e
if (!window.WebSocket) {
) I7 |1 F+ n, o( S4 B# t
return;
& Y, O6 D1 Z Z# A# o
}% a6 P `& ^* e) b7 R* V' G
if (socket.readyState == WebSocket.OPEN) {) l( W1 a( Q& J
socket.send(message);
! [7 h% }1 Y) q
} else {
+ o, ~) ^5 P E" l: |" u8 G9 P8 e
alert("The socket is not open.");7 _) H. R+ v7 E- x8 V4 Q, J6 ^& `
}
% l, h( L$ j: q; l
}0 z) C0 F! L; a; O0 d
</script>
9 e$ ^: W, c1 s$ A/ X$ l" A
6 O. q, ?- _7 M- x5 Z- A. s
</html>

复制代码

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

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