浏览器使用WebSocket实时通讯

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

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

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

复制代码

0 s( ^: I6 h! t
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
& ^+ I/ \( m F5 f* z( W3 q' N& B5 Y, v8 P
4 C' Z! G2 T3 p8 S2 ]( b! M
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){! Q, V# z9 \7 A: G/ x# m! I
- g, @! G) O( j- y1 N
//打开
5 o. I+ a9 G p/ m, l
" r% S- Z- ?' {
}6 ^( G! w; z z3 q
) M3 x& v+ d" o/ t& t
* d& a4 q+ y' B
socket.onmessage = function(){
; V& b! o2 |( H h$ v$ L& u$ O
2 t% T7 ?! A1 k! |( c( o4 s
//在event.data消息数据1 x4 o) O/ V4 Q- Z7 V0 A( G
}" ^& C9 h2 X e
" |- w1 l' W, H2 h4 S7 Y* p3 w
socket.onclose = function(){
H' F9 m2 H g
3 s* [/ V* S) a- H4 P* f
//关闭WebSocket" g1 N+ h: ~, E% j I) d4 Y
' `$ W/ d3 p- I# U1 R1 U2 R
}* \) D' F4 y# g1 t
9 R/ ^8 B8 n, c" ^
socket.onerror = function(){
+ M6 v- o7 \, \$ j4 T+ \' _2 M# ^, g' h
$ s) j8 ~( G/ G( G) F, \2 y
//错误触发
; K* x: L' ]4 \% |) m
( ]4 E+ {) ]# l7 g
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>" z# ]/ L9 g/ Y3 C( x& I
<html>
# Y0 F8 l+ B' C% L$ {$ f1 a3 E# w7 u
7 n1 `! m: d# h& _
<head>1 P; @4 d: i# ] q/ W$ [2 ~
<meta charset="UTF-8">
+ S e1 \0 W) C$ D" ~$ n
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">, k5 }! H3 P7 J4 F) i9 W) s @
<title>WebSocket</title>) o% ]7 a1 h2 m
</head>
$ K% q. A# D% h4 `" g
7 J2 h' {4 H7 k& C7 v t/ z/ d
<body>
, R% e7 f+ w' J( _, z. E) a: U
</body>! A% Y3 ?) E5 p- w6 q- b, c
<script>/ l. Q4 W* u3 ^; U% P) h8 C
var socket;
. W- R" e6 u% G% v7 s
if (window.WebSocket) {, m5 L# }+ e1 t3 Y
socket = new WebSocket("ws://localhost:8080/myapp");5 o$ N, e: n; _' C* w
socket.onmessage = function(event) {
% f) l9 K y8 k; l+ y- M2 {/ `
alert("Received data from websocket: " + event.data);- S8 w) y: n r3 o& j# N4 N# K
}
: ]+ m. h2 {2 D- N* t6 m
socket.onopen = function(event) {6 f/ g" U; Y+ W5 V
alert("Web Socket opened!");7 L" K4 P+ k/ ]$ }# [' V( g& U
};# D1 C( Z7 x5 |: Y( F2 k
socket.onclose = function(event) { _5 ~' F9 w; l2 I9 I6 S d5 u
alert("Web Socket closed.");
+ x; `! _$ n T; ~# O2 {
};
" x' H1 u- {& S8 G& @& G
} else {, O! v% Z; X) O, \/ `! L. T5 p8 G
alert("Your browser does not support Websockets. (Use Chrome)");
! F' G5 R( k* _& q2 e( O) W4 q* L
}) a" Q. E' \$ K G" ` e4 j$ x- `
( Q6 c+ G6 A% g& b
function send(message) {
4 v& @7 z$ p! g! ~' t' a
if (!window.WebSocket) {: r$ d: p% n/ c/ e# M. \: P
return;3 c5 F9 J0 w# d- L
}* o4 b0 X. n0 n Q
if (socket.readyState == WebSocket.OPEN) {
y0 t" g* I9 J0 [" f
socket.send(message);1 J2 `2 I' ]& P5 a
} else {
. D0 f# |: }/ {1 C5 |% P2 a4 X
alert("The socket is not open.");, o+ M$ w, y5 V6 s2 W+ W
}
1 N. ^: ~# F6 n9 M1 y
}
0 z6 W# m8 D. t. C
</script>
; @1 C6 B* X# x# U! z' D) o
. u5 X; [, t2 y R! j# J
</html>

复制代码

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

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