浏览器使用WebSocket实时通讯

admin · 发表于 2018-6-23 19:36:00

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

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

复制代码

与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。

" _! B) h9 h M/ Z( L6 \( J! T! d* H
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开- P3 y2 {3 I+ _" _1 D6 R
}
7 t. L$ ?# k" Y3 A
" A! ^6 l! w ~' U+ v& D) ?: i
socket.onmessage = function(){8 q" ^1 z: A- h4 q9 N
//在event.data消息数据4 a2 K9 m2 x( a* [$ D8 ?
}0 T! X4 v& `' O
* u& k3 x' B# {. K8 f
socket.onclose = function(){
8 f- m/ {" W! [- \/ R, g# d
//关闭WebSocket
; U5 d4 Z( l+ X+ B
}
- @$ H6 q9 y! l/ ~7 T
7 u9 H4 x$ w& w( e- f! @! U8 f9 f
socket.onerror = function(){
" H! C& U7 G; }* d7 O+ S
//错误触发2 k3 I0 G4 N" U- k8 G0 j ]
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>
- ]4 j8 y; ~+ A% q/ Y5 \! Y, w
<head>% j. y+ X4 J: J" m! c% z
<meta charset="UTF-8">
2 J. s- C+ P' T+ u) O" s3 q; d
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
- }+ I& m2 L: y9 U9 v! e5 O
<title>WebSocket</title>% Z' P, a* [5 a+ K; {* w& Z8 T
</head>
/ r7 n7 L' F3 q# V R5 n0 d
<body>3 B$ X( `. S! b6 f6 y! h
</body>
8 t/ l7 o2 y0 v+ A' Q
<script>: {$ }" ^% a( w% j+ P( g3 t
var socket;
( R4 N0 Q5 E% q r1 K7 K
if (window.WebSocket) {
! N# L& Z8 d7 r* W6 }' v
socket = new WebSocket("ws://localhost:8080/myapp");
# C9 u- q* |; V7 T" n0 r' L H
socket.onmessage = function(event) {6 U- I; p2 [5 k2 u8 I, F- V
alert("Received data from websocket: " + event.data);; E8 w! X6 f- D; o* V/ B6 Z
}
8 G3 L5 [, U. h4 ~* F6 X
socket.onopen = function(event) {
& I6 e- Z6 u% N- C& o
alert("Web Socket opened!");
$ @" r3 Z5 D3 X5 e3 `
};3 A( S; v- r5 R
socket.onclose = function(event) {7 ]& Q4 W' K7 Z1 A. a. A; e
alert("Web Socket closed.");
8 u& e+ {# y) a$ P( C- i
};
7 k! J4 P* P) {! q. W! x2 K
} else {
( [" X5 I; |% g( Q1 r6 J* n
alert("Your browser does not support Websockets. (Use Chrome)");0 H/ A. I( C' }9 d2 b0 \
}
( z: l% l, B- E6 c) C' ~, o' C5 V
! w {0 ~( l$ ?$ j- B
function send(message) {
6 y0 n2 d" P* n) y
if (!window.WebSocket) {
% x4 V+ w) O; g" j/ J
return;7 Z4 \* F+ ` Y0 S. A$ z1 }3 W0 t
}4 ^4 R% H- M) y; m2 c
if (socket.readyState == WebSocket.OPEN) {
, }9 q6 g; j" R% |
socket.send(message);
! Q$ l0 B. u" b4 |5 z8 I) V- I( j
} else {
& g6 c- e. Y! z2 ?8 B, Z
alert("The socket is not open.");
% v" ^! b1 f& a- f5 I
}
$ w3 E+ a; y( | M6 c% h4 Z0 ^( N
}6 d- i% s# ^! R' j
</script>( S8 G7 ], @, [ a }# t' }
</html>

复制代码

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

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