浏览器使用WebSocket实时通讯

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

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

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

复制代码

$ f5 [) j+ x1 C! k8 v- H与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 - y. G) D! r; m
4 S, f) f1 z7 _9 E4 M

0 W/ o; ~# l" D! V: t: ~该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
" M! Q" m! j% `8 E
8 c8 Q! a. `# X8 v0 X
//打开- V! p% b0 I$ `! F
) L: w/ u1 Y( C
}3 t# T4 V/ w8 `, ~! `8 X
2 `5 O* ?1 `& K( r' [
; X2 N: \& W0 v F, o
socket.onmessage = function(){
% W1 M0 A/ m9 [% [, F
. ^7 S5 }1 C$ i' A2 d
//在event.data消息数据* B* n! x; w8 |. d
* k: t; W: Z' ]/ ]
}
) Q8 ^9 S9 T5 ~: A, H4 W8 ]& V4 c `
& @' |) n# {& r) q0 i9 W) ]1 ]
socket.onclose = function(){0 { [0 @. g$ i( f+ c' f
/ k3 U& U+ S( ^. ^ l4 v
//关闭WebSocket
, E6 U5 S u& E8 j8 b6 v U
6 G& |, M y/ a% V! e7 ~
}# u9 |9 ]) v+ R% D d' r- p
/ h* F' [! E5 Y, E4 J k
socket.onerror = function(){) A# i2 W. d7 a
, g* H4 L$ m' p d( \3 H
//错误触发
7 O# ]7 l+ g5 E# w7 S
; V" c, A3 R' z) _2 J" @8 q
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>! \3 U6 A* V0 j0 a! N p5 w
<html>
5 ^7 Q. ?+ X" N; s! Z
' X# x$ I+ m# L) f! |
<head>0 ^! p* X2 T% w
<meta charset="UTF-8">+ \( y! Y0 i4 @2 { k" U
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">9 F: d7 q ?7 J0 [7 I2 l
<title>WebSocket</title>
* m) Q9 G/ ~" E2 S
</head>$ g; f8 O. `3 G, a3 @
- t$ `0 ]% W+ @6 L
<body>
% {; q" V6 }8 B% F* v# J/ @
</body>
+ o5 R# w0 b4 w( t- Z
<script>
" g; L; z) Q" { L
var socket;
/ o4 v0 o% p1 E4 i/ x) I
if (window.WebSocket) {. P5 k t! X, D: G" G% t
socket = new WebSocket("ws://localhost:8080/myapp");: A1 l; I( j ^; M0 L
socket.onmessage = function(event) {
! L5 V) ?# g, @( U* Q
alert("Received data from websocket: " + event.data);
2 W6 u* }* u6 {. K3 h6 P& a) J7 O
}+ U8 T+ }* ]' b/ D9 c% H9 V
socket.onopen = function(event) {
, a( ^! L" X9 B; p4 E$ J
alert("Web Socket opened!");
2 p$ |6 z, M6 J! k' H2 r
};
# X9 y3 A4 M3 x. B
socket.onclose = function(event) {# K- Y0 S" e# I. u$ U" T
alert("Web Socket closed.");0 F5 x7 P1 m. D
};1 x, b) a9 Q6 Z
} else {; O' T- T) E6 q3 o
alert("Your browser does not support Websockets. (Use Chrome)");4 {8 h6 ?! F: X% a3 s1 z, ^
}
7 d* ^$ `2 D0 H2 o& t/ c, |1 q) [
) h+ P6 F# A# v9 j
function send(message) {# R, o) B. K7 c( E( R$ E' p* |
if (!window.WebSocket) {& O) E/ [4 Y" A" ~; w& c
return;, @, Y, U' _' {# G
}
1 X+ t) J9 z2 `- G
if (socket.readyState == WebSocket.OPEN) {
& k% m( b$ x% j, U
socket.send(message);2 V# m, Q( V' Z3 C
} else {! w) C! {8 ]/ g
alert("The socket is not open.");
* L' \5 B( k8 D# G: Z- ]0 R- v
}
0 _, f$ f5 P/ g
}
- g, F4 x# M6 @7 \
</script>
$ X; X5 t7 }; X% N! s
% }" |6 s! g5 o0 L" s
</html>

复制代码

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

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

浏览过的版块