浏览器使用WebSocket实时通讯

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

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

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

复制代码

3 f: B1 V m# v% q: P
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 ! |, g6 P" r% c I3 _9 m
7 F: F& M0 M5 y8 y3 |
- m3 j. g5 R/ E- x6 u
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){- R# v k2 V0 Q
H. G! J4 p) |8 n+ i7 D7 S5 U9 i
//打开7 x+ m1 }3 x& n) r
+ ]' P4 n* b( J" s* m
}* p: {& V. E7 ]5 o2 M m
& f& e8 C0 J6 l% _" `
7 b( R3 f( l* U1 a! N8 o2 x
socket.onmessage = function(){; E% q; n" _) J$ U
. I9 j( w ~+ E+ M- b
//在event.data消息数据
% o9 L8 ^ Z i% G. B3 s( `
7 Y2 }! _5 X# F% r# [7 q- ?
}
0 S8 \! S/ ]+ E& J) R* i
D4 ~" H6 \; \
socket.onclose = function(){7 f$ @& {4 N+ [4 T
3 B P. x, v& Q5 M9 K0 I
//关闭WebSocket
5 S& i% P# S9 E6 z6 C5 k& m! z0 b
# ~/ W+ b5 ?9 X9 e k, C7 j, v
}
9 J6 T% D6 r5 x5 h
. [/ X( N! ?" N) u3 ^' c9 r
socket.onerror = function(){
5 Z+ m6 }* r J
2 Z2 P8 W0 r0 r! Z9 O
//错误触发. G0 O- B' @1 ^8 i
. {: G. K s* n% s! C# g1 x
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>* b7 q) I9 `( L$ W: z
<html>' M$ a4 ^0 T8 _1 L0 t
9 b/ B' [( S3 C0 n
<head>
4 {, y/ f* L: K) p# F$ x
<meta charset="UTF-8">
5 ?2 h n; v! B& m2 c
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
+ s* X$ a5 d: \# n6 c3 h/ }4 r
<title>WebSocket</title>
$ |* V3 G& q2 O# C$ D; [
</head>
9 a$ M- L* ^- f4 s$ j- E! ~
4 O7 Z/ B" F j4 x1 o4 |( M) E
<body>
* S- c: `* G9 @2 }) C+ k
</body>% U F% c2 T" z
<script>; c$ t/ q. a: A2 |2 N, s; `
var socket;
( H: C h1 O! X. h$ h5 s5 l' {
if (window.WebSocket) {
9 E) R- H5 @4 [0 l4 L. V
socket = new WebSocket("ws://localhost:8080/myapp");
7 u& p- B& y: v
socket.onmessage = function(event) {4 w1 C/ P! a1 M' V: {# z, j7 [2 c
alert("Received data from websocket: " + event.data);9 A0 F6 R5 j, Q! m. u& b! _! t3 W9 b
}5 `6 Z& k* L+ W0 J3 ^
socket.onopen = function(event) {
* n8 u! U# A" ^$ D W( v& K2 _
alert("Web Socket opened!");
$ [" K' ~. N( z0 E- l1 F/ g. q9 v& K+ Z
}; J' F* i R7 x: F9 b) G
socket.onclose = function(event) {
; T0 \: Q6 j" {
alert("Web Socket closed.");6 k8 Z8 Z' `; {/ L" w
};
9 O: J% b/ q0 o p. y' r
} else {
1 {" H- E5 H8 G* i% @
alert("Your browser does not support Websockets. (Use Chrome)");0 F( A0 B. V" K' D9 V0 K
}1 {" g7 q, z$ X; Q, e. c& l
/ z$ a5 d9 J) y! L
function send(message) {
9 g! O7 ~5 b9 b J
if (!window.WebSocket) {
3 s2 |" q# v; ]" D2 A1 c
return;1 h. {# c& `6 `5 a* i5 y! _
}
3 H0 P) B+ l$ @- u, t% G
if (socket.readyState == WebSocket.OPEN) {& L$ V# ~# x, D! k5 A! ]- f3 V
socket.send(message);
+ j% o" ]! f3 x) V3 N
} else {+ G S7 ^' U! h+ Y
alert("The socket is not open.");) _9 O. A- v4 a7 |- {
}' m8 C( A: C0 w' U' h
}
3 S- @; K2 T* J5 w
</script>
5 {' {6 ^2 e# c- O
0 E3 |8 L+ P! X: s: e+ }! j' ?
</html>

复制代码

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

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

浏览过的版块