浏览器使用WebSocket实时通讯

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

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

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

复制代码

8 k& d3 t0 Q) J! M. G& x; G' n) e: w与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 1 X$ m/ d& b( r. y- M8 r

: ]0 L: @2 Q. o. f6 {2 Z4 t, q' w( _( z8 K* |$ o8 P- d+ E
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
9 `/ y( N7 m3 ?1 H+ L4 P: s! l; C
0 q' ]8 i, z n( k& o; b7 u
//打开2 o# {5 e8 |2 P/ ~
4 F7 M8 e/ Q0 E7 {/ M3 I
}
5 o; A6 y0 Z4 x5 r9 ]9 T# U; o
* h1 B" z G$ L: ]5 A
) A4 n2 J/ a% s9 K, n! p! h
socket.onmessage = function(){
% w! Z- O* i- [- u
; e5 F0 D1 M" B
//在event.data消息数据
- T3 [, u- W5 d# _* W
7 Y* H( q* y; X Z1 J0 C
}
+ O- T7 e i$ C: x! U5 U
6 [- {0 o/ `# e/ x. Q
socket.onclose = function(){
5 m& V0 \. H9 B- ^8 T/ l
& m4 u# I+ y/ n$ k! n I
//关闭WebSocket3 Q; h$ e7 k$ {; @4 p) i( G
0 p0 k5 t- ], k e. {
}
/ P+ k: k8 B3 M2 N! N6 u. |4 u0 G% l
3 i; P3 Q5 Y! V- [5 w# l
socket.onerror = function(){
3 z6 D% j! I( t2 I5 J# \- W
3 B# d2 h2 v! Z( Q' p5 Y: P4 o: j4 y
//错误触发
; k4 b. Y- S; q0 S$ s
/ ?5 ]. T" p8 Y7 v. z& S8 D
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
( I3 F, T( ]0 D8 ~
<html>
# p- A x" {, K' p2 O2 R! ^0 h; V
' }- V; h* ?" b. K2 f5 y
<head>) r$ v0 m8 E$ ]1 a* u' K
<meta charset="UTF-8">
* W, H# ~& t$ \( h. }6 f
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
8 e& J1 R/ K# L& ?. ]
<title>WebSocket</title>
6 r1 h, H0 }. V2 |8 u
</head>
( O6 C6 h; d; Z9 w6 C: z7 I3 ~
9 x" S2 U- E$ t& v% P/ U6 i
<body>9 Y: u# T# P+ e9 y/ q" G y
</body>
; B( P# W$ K" f+ s" g6 { H6 f
<script>( Y! p7 c7 ^: O9 g3 a* |
var socket;
0 ~5 Q- I8 U1 R" j8 N. y
if (window.WebSocket) {
8 {# e/ H" Z8 V0 S6 o' v. C& W
socket = new WebSocket("ws://localhost:8080/myapp");1 a! N6 D# P3 d3 m
socket.onmessage = function(event) {
. ?3 ~: E; a+ O5 W
alert("Received data from websocket: " + event.data);) Q% i, y V( R1 g' t' v
}
( ~1 `% K d E* V( ?
socket.onopen = function(event) {- J; E2 X n( x5 U- ~% x# M0 n
alert("Web Socket opened!");
( D# C% i) P0 T3 e4 ~
};& v) m. L7 h% A4 m2 I6 o* c
socket.onclose = function(event) {
" x- e+ h' V7 F7 q2 ]- A. v
alert("Web Socket closed.");2 x5 N8 i! d/ e% ~& _
};
2 u) y2 N3 A2 l$ Z( ^( W
} else {
* {7 Q3 `* C \/ s0 q2 \; O( K
alert("Your browser does not support Websockets. (Use Chrome)");, q7 O. |5 V( _/ }
}
0 O9 ?4 M: w5 e+ e: o! n
' L W1 D9 G( p$ f
function send(message) {' }9 x! _0 B& U, G9 E
if (!window.WebSocket) {
$ K6 [' H0 i0 M& q8 m. `3 K- X4 {* ~
return;! S- F' F. ` u. `2 V' u
}! {; u- x7 e) j- A: s8 y! c" O
if (socket.readyState == WebSocket.OPEN) {
; d9 r8 |0 ]1 i: E8 j
socket.send(message);5 A6 ` }$ O O* B$ l* R
} else {
6 A) {3 t) ?- {) _4 }& b1 T
alert("The socket is not open.");+ i2 d# F% c3 G3 Z! Q! M
}
* s7 S* D9 ?) p$ J: @
}
: e8 g' w0 h0 E2 T. h
</script>
% P; S- m+ O. l: @: N. y1 I
( ~* I6 n0 U3 H+ t# V: M
</html>

复制代码

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

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