浏览器使用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:// 前缀。
1 b q* {* B$ J' ^2 @7 ^5 O6 r
9 _2 b' p1 W$ I c7 K3 h5 w5 q( H( f- ]* a) @+ {
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
8 s7 E6 w7 n' `7 X4 E7 E" Q" d2 A
}* Q0 L4 S! o6 m4 F/ U% U n$ t
7 g/ E2 J$ \ u5 }
socket.onmessage = function(){
5 x" ^+ a3 C8 E2 f6 x
//在event.data消息数据( f; v$ z/ z( l) p9 ?
}
$ ^ N, \* ?3 p. P+ V+ k- |
3 R) q( f# X- f! F
socket.onclose = function(){
" K' R8 f4 j: M) H
//关闭WebSocket2 P0 E) \+ w& r& [0 S, J) J
}+ v( |' A/ u% i# X
: ]9 G% Y& Y# i$ h* d4 G
socket.onerror = function(){
" [; P* p# d9 O) i
//错误触发
1 T! a+ D, J0 q4 \( |
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>/ s. C, w- c# O% p3 |; ]
<head>
- r9 J4 d! A0 c; m
<meta charset="UTF-8">
; S# d/ @% K0 n* _5 z+ S
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">' y# l4 h6 A. b, I+ M
<title>WebSocket</title>
" q* U0 _! `' A2 F% \( o
</head>
. i! A6 G" G0 e
<body>
4 K. z9 ?2 ^5 X. a# G, s) e5 f
</body>
2 f' _$ q' X, z( ?# J
<script>
! p/ X. F4 C X6 g) Q
var socket;
* c3 J- o, D+ p
if (window.WebSocket) {, ~' H! m) a. _# Y# p8 R
socket = new WebSocket("ws://localhost:8080/myapp");
f8 u; O# [& | d3 }8 Y
socket.onmessage = function(event) {7 \ L: _1 Z v4 S1 s
alert("Received data from websocket: " + event.data);
) W- u9 i& A1 Q0 _' T7 P" ]6 Z
}, M9 D1 `* l6 p+ Q8 T) S) h
socket.onopen = function(event) {
9 i3 q; ?" q1 F) s" I
alert("Web Socket opened!");' e" n% |/ c5 G, A" ]1 D5 Q& \) o# U
};
( `- H+ A* H9 G9 w7 l
socket.onclose = function(event) {: o4 c% k( k% e
alert("Web Socket closed.");
$ m# ]0 D$ N2 j
};# K8 R, e/ I/ z5 L9 H& l
} else {
( i& [( y. L T
alert("Your browser does not support Websockets. (Use Chrome)");4 K5 d7 @0 i# ]4 @- P+ W+ h
}
, h r- N* m% Y2 U+ m2 r
* k( Y9 F% v2 c
function send(message) {
% x/ h3 |% N+ c8 R
if (!window.WebSocket) {5 x7 O8 p6 j. O
return;
* y3 r! C2 d, P: M3 n9 b( u! L
}+ L/ ^5 q V- m) y, G
if (socket.readyState == WebSocket.OPEN) {
# e0 Q7 r; x0 s5 Y
socket.send(message);9 j/ B3 `/ Q& g3 s! [
} else {
* {* j8 O9 P3 p9 e6 V
alert("The socket is not open.");
# K0 \7 D) B( D7 a& [
}
% F3 z+ c% z6 F# L) g
}
7 O7 \7 ]. h, B- e2 u
</script>
J3 M8 v5 V" P
</html>

复制代码

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

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