浏览器使用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:// 前缀。
3 |7 I- i( X# s9 j- X6 J" l) v6 c$ S

# f) j5 j8 s( c: D4 y: X该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
& j7 Q6 o# v* o
}
! `; B4 g* z1 [' b
% c1 x) D& t+ ?9 E$ Q
socket.onmessage = function(){
' b. C$ V" A; M d
//在event.data消息数据: ?6 S0 K+ x& N0 Q7 @
}7 X' x0 }" f+ V7 w: z" h* W P
1 f7 s+ d1 c, c) t9 P6 S
socket.onclose = function(){
1 w9 }5 ~5 [7 B
//关闭WebSocket1 `; n/ o8 V6 P- g- B% t% W) a* z
}# q6 x4 G5 b9 H7 t0 T( A- ?
/ j$ Q% d. ]7 m. t% T+ b! ?2 [
socket.onerror = function(){5 ^8 N$ d* ^& z0 A
//错误触发! U# w- Q O" k* ~( v( j; G; M K/ n5 T
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>6 D `% x* ~; |! g3 S. ^/ P
<head>
' b1 b7 s% q. \+ X
<meta charset="UTF-8">
. @1 s" `( }$ c7 o4 F1 x
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">8 U. ~( O- m+ z) Z9 f- q
<title>WebSocket</title>" R% P1 ]4 o8 }" ^/ c# o
</head>( L( `# P5 g2 B! F/ T4 B
<body>
. V% y+ o4 q9 I1 m+ H
</body>
6 p9 [6 {% R- d% C6 o
<script>! D8 K1 ?8 d, P9 w2 g5 K6 K
var socket;5 b% f$ @8 N4 D# X+ R% S* n
if (window.WebSocket) {
7 d4 `. T0 ]2 h/ c' H: u# R- ~
socket = new WebSocket("ws://localhost:8080/myapp");8 a( s8 G% q2 T! t1 s: w. L
socket.onmessage = function(event) {
0 A j: F8 `8 \: D! w8 |
alert("Received data from websocket: " + event.data);
! K0 u# m6 D. m% ~, S
}
! _' c4 |8 j- B* F- f! R
socket.onopen = function(event) {
[" x9 s+ x3 c- J$ V# ?2 [9 p
alert("Web Socket opened!");
/ {. [) B9 K" G1 @2 c9 s
};
+ `3 f+ H1 W- r# c; Z
socket.onclose = function(event) {5 M5 |5 X6 ]# T
alert("Web Socket closed.");7 X( w6 V! `/ Q/ p( T# L
};0 N; p9 |7 y% s: O% E
} else {9 T- c) S' b; @ b' @) ?% o& |
alert("Your browser does not support Websockets. (Use Chrome)");& i/ c; A; C; f
}
7 |. k* o8 i- o+ y8 P* ~
- z- R$ x; o# g( t' r
function send(message) {) n' ?4 Y6 k: ]! F* Y+ p5 _: o
if (!window.WebSocket) {1 C9 j2 _1 ]; h* m+ L
return; O+ r6 y2 r5 D
}9 [ _8 W% z* l' e& f
if (socket.readyState == WebSocket.OPEN) {# O# }. l* j- K, M
socket.send(message);; | `3 n/ u2 e' A
} else {
0 A& _. I; o- u/ `6 ^
alert("The socket is not open.");: e4 X& z* T6 s3 C
}) o7 g. o1 S" ]0 e: ^7 Z% ]$ x
}
/ q4 D1 }1 m+ S* z8 a& r- U; J
</script>- Q, h( y( V9 m; K* u9 f. ~7 J! r
</html>

复制代码

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

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

浏览过的版块