浏览器使用WebSocket实时通讯

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

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

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

复制代码

4 q( q6 i: S' {. G1 X+ Q
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 r; Y4 h2 q) Q, d1 T! [

' F) e5 ?- C/ o( V' B
. X- s3 t q( Y4 V; M该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
0 P- x( d1 a- E7 M! l) Y
3 a' D4 O8 p( h, f: R
//打开
( @; _6 s4 j8 A B' s0 |; E3 J
) G; J; a, G5 ?2 c' n8 D
}
4 B+ E8 \. w* D. ?6 B' R; |
+ C: [4 R) w% n- M3 t0 b
# y! h6 [( [8 q; n
socket.onmessage = function(){
! l( {' ?, C4 S/ F0 l* Z4 C
5 \8 }; K. b, A f+ J9 \/ N+ N8 D
//在event.data消息数据* r4 \7 s4 C3 L m
& U1 L, I6 O! \4 o
}
7 f' B: U0 k- w( ]" l/ H3 h% x4 f
0 Z/ i5 \, M G( R, n
socket.onclose = function(){2 B( R3 Z# H6 u! j. V2 ?, F
2 r& U( a' G% k! N3 S
//关闭WebSocket' E+ @3 Y) m: a
- r& `( H% l: `$ u2 X8 M
}2 b& e- M6 h7 u- g' p4 t1 q" \
3 R% ?- H3 l' r& x4 J' |( ~/ J
socket.onerror = function(){
* H2 c; G9 J- r5 J3 ?
+ Q7 t/ u0 O; E
//错误触发0 s" y0 c5 T ^9 e0 U4 W6 [
! ?7 b0 ~' Z$ [
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>2 ~$ R# V# ]1 ~# a. c( b
<html>, v/ {0 e5 P$ x$ r
7 s( u# e# o( ^
<head>- } [. R; ^, i% A# b3 Y' J& }
<meta charset="UTF-8">
: A7 y4 P! J. N/ K( R7 y: y
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">1 F3 Q1 G% }+ Q# e/ P5 A. B
<title>WebSocket</title>. Y2 m2 ~. ~0 k6 ^& t! y. w
</head>& N" T! G1 y- m) U% }) h2 {
- C0 z3 `! n2 Y; |6 D; l. u( Y
<body>
' ~" G6 o) j; f& n4 F* K
</body>
; W: y7 R) D, z5 `* A9 V& F
<script>
) S* u$ H3 E8 @! _) T' z! U$ Q+ [
var socket;+ j! z: l7 D+ g
if (window.WebSocket) {
4 f# z) ?# Q" W2 Z' a* q- Y& g
socket = new WebSocket("ws://localhost:8080/myapp");! u: \% m# W" Y/ S( I; q" `5 S
socket.onmessage = function(event) {+ F. v* ?( j# {! \
alert("Received data from websocket: " + event.data);
9 x0 R" j' ]4 W; H, x& l' f- W
}% K) k: q0 d2 s' n3 x) a
socket.onopen = function(event) {4 t+ Y& l6 ~0 n* Q9 ]& \; x# u
alert("Web Socket opened!");( Q1 b, ~7 U: u& j7 R: j
};; a. a+ X+ b" Q4 X1 k, [
socket.onclose = function(event) {
; [; ~$ X5 _5 W6 f3 b, T- |" j
alert("Web Socket closed.");
, v4 ]* O6 Y7 M2 _
};
$ D2 T% Q3 N/ A7 f5 w0 Z$ }
} else {; s5 g5 r* b3 {- g
alert("Your browser does not support Websockets. (Use Chrome)");
- @ s( `/ g7 {+ u
}
7 s: f z; D' _$ l
9 [4 n2 L0 p# O
function send(message) {
- l: W& r1 b$ P
if (!window.WebSocket) {# G# _& k' s r( B7 h
return;
2 v8 g% N& k( g* @$ z4 O
}
4 p- v% A* A4 e3 s+ r" K0 y: f. N
if (socket.readyState == WebSocket.OPEN) {
* b' x1 p# g8 E# i9 j* ?7 i. t
socket.send(message);) c" r: }3 o: O6 X# A: I
} else {3 F0 e; `; h T* q
alert("The socket is not open.");
! b+ |! T) v2 n/ U; F$ u
}4 o% G G" ?( A! ^4 n' A' W$ o1 L k( T
}. z) T |6 w& K9 p/ \
</script>
- n9 d' [. ] b7 a$ r; i6 x
, a8 H% B) ~ T5 a
</html>

复制代码

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

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