浏览器使用WebSocket实时通讯

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

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

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

复制代码

) n# S) J, a6 `5 ?! g5 B" e
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 ) m. P( T4 Z" k# n+ a

- }" ^0 x0 ]1 n1 N2 a
+ e7 f: R* U1 ]3 p: W4 x& N该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ h. m% n) p! h/ T: q
, Y. u. z* }- K/ t8 l) X
//打开
9 y% {' n# E' V( n% b' L
# M- j4 F: y- ^6 {% m
}0 B9 p+ j. t; y; }, O
. l; U6 W: w4 Q; J n
3 R/ o1 {# Y! \& r6 o4 i
socket.onmessage = function(){
5 Q/ E5 O# B0 Z% h- A) E" l
: v5 c, P8 J% F: w w( k
//在event.data消息数据3 |' l- T/ ^) U1 J( s. t
& C) A+ s7 n" G- t. p/ Q
}
* T- V6 B% w5 Y8 z3 @
1 T5 j' l" h! P6 M
socket.onclose = function(){
5 e7 m$ @: v/ J7 y
: L7 L' ?. u: G1 m
//关闭WebSocket
# y) N5 o2 O ^ f( p1 p
4 w) D) ^5 i1 `, g2 h* H% r
}9 E7 a" l% L D3 B0 ~/ u; R& E
0 J( Y* f, c1 ?; Q$ I
socket.onerror = function(){
7 x/ d5 h1 X& X. E4 ]5 s6 e: W. e
8 ~8 S$ m% _/ F5 k
//错误触发
H/ D( y7 e n
9 z. ^3 A* j( o" ~
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
5 H# }1 `; j o+ f# u6 I V# b
<html>: n- V7 F. M1 j7 T, f2 n; k9 I- T
# p: { E: U7 P& y+ h4 c8 z ~7 B
<head>
6 K' o& ^! n2 ^3 c' C
<meta charset="UTF-8">6 v; y, D1 x+ V
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
: ~+ m% R) v$ F/ W9 z, `' \. d
<title>WebSocket</title>6 J& Y% C0 E" b! G' r1 `1 e, k
</head>
4 C! S7 W4 Q! \! A1 k, Z
) \& A6 o* y. j" O( g
<body>
E) u/ G R+ P3 Y- J" Y: T
</body>
. Q4 \, _' E: F1 W
<script>
5 M& |, q+ j: g, S/ H5 T
var socket;
! j7 w9 X; I% D6 x t
if (window.WebSocket) {2 U) s% n, o; {4 q% ^% h a9 _1 g
socket = new WebSocket("ws://localhost:8080/myapp");
* |/ V, B$ M& o
socket.onmessage = function(event) {
8 N# ^: m. i8 x+ n# A6 J
alert("Received data from websocket: " + event.data);
4 n w, I: s! u
}9 f6 c1 H+ c* B+ R& ~. z
socket.onopen = function(event) {7 }8 M( e9 F- w! p; ?8 {3 D( k/ o0 d
alert("Web Socket opened!");: w) w0 Y/ h6 x1 C+ m4 Q
};
* U; t/ M5 ^) V; d
socket.onclose = function(event) {
' s" y Y0 Z0 G2 A
alert("Web Socket closed.");" ^- S1 h! _/ H0 C& n* q
};
5 D% D+ G& n6 R9 r0 j
} else {
' b O5 b3 l. {% ^* _
alert("Your browser does not support Websockets. (Use Chrome)");
0 K' m! O7 D8 w; s
}
$ @* [; U7 K P x0 T% i
; ^8 P8 W+ J g ~6 u
function send(message) {
3 w3 V1 z( R5 V8 [# Z a' ^: a8 |
if (!window.WebSocket) {
9 S7 o' {- C+ s/ N
return;
1 `! R9 x; _: K% g8 U
}
% V6 J8 c$ N7 i# e" A% @9 j+ b
if (socket.readyState == WebSocket.OPEN) {
9 q/ n3 W0 G* t- I8 W) Z
socket.send(message);4 a& N# T6 @ O& T& o( _
} else {. r- q) ]$ V, ?9 y4 q2 m) n
alert("The socket is not open.");8 }- |7 M1 s, B' X2 N
}
2 M: n6 c# o. c6 x6 n
}
' P7 g. G# K" b( u: P
</script>
8 P( h. M( w6 ]' |
, H3 e, L) ]7 g$ w/ m* ~
</html>

复制代码

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

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