浏览器使用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:// 前缀。
+ V# I5 b1 g7 C2 n; v0 c4 s0 G2 {* ~) P# s* k: H* m3 X {2 ?& A
3 h$ B) r' q/ y6 C1 y6 I
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
. x7 P' O$ f& K2 D
}
, M$ N" [; {$ K& \
8 M. [, V L V( p0 K/ C
socket.onmessage = function(){
9 J7 w2 V# I6 u, z5 S
//在event.data消息数据8 a) U. G2 L& i, R
}
4 [& F4 a( n8 n! C4 P/ K2 X
3 m' I4 J) {/ w
socket.onclose = function(){; H' Y7 O- t5 p2 f* {/ l' j
//关闭WebSocket! J6 @# L4 [5 H2 p) n
}2 o2 ^% c: d1 E; [$ G3 [$ Q/ [7 {
% ]% H( i& S k! r
socket.onerror = function(){
5 L5 U5 S* h! O( |. F
//错误触发3 b# ^! M- S8 ?( Y) F2 {3 P
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>) _5 t' p! ?+ F ?& r2 j; J$ N
<head># Z/ l- h; {( I6 h- v
<meta charset="UTF-8">7 {0 ?! k; r I/ @
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">+ [2 W! F: G3 D0 |; i9 D
<title>WebSocket</title>
( q% D" j: P ~( M! o
</head>
2 F& J! O* G, S W" D
<body>
) X1 }: \8 M% }5 c# R2 ^! |
</body>- L! H+ C, C l6 e4 ~ m, v2 B" k
<script>
! B7 l& d! H0 L' M
var socket;
) ~/ E$ ?# i+ q% t J2 ~3 u, W1 N
if (window.WebSocket) {
+ }- e! L/ ]7 e$ @- m3 c
socket = new WebSocket("ws://localhost:8080/myapp");8 w: O& Z; L; m9 R& @& i
socket.onmessage = function(event) { K. M+ n& G Q! d. _& ]4 Y
alert("Received data from websocket: " + event.data);, @4 j E$ G. z* n# M
}
" w Y; n6 H/ N1 Y, L
socket.onopen = function(event) {+ e9 t% {% b; m" x
alert("Web Socket opened!");
. d& i9 p$ ?0 U9 k$ [
};' X' |; E# V$ \- j4 f4 V" W3 ?1 L
socket.onclose = function(event) {
* W ]( K# `1 P2 k/ k
alert("Web Socket closed.");! i* K/ [* _" U/ [, P! Y5 S1 b" R
};% C6 b# L% K- h [- v/ W
} else {0 o, z1 X1 H. l# [1 X
alert("Your browser does not support Websockets. (Use Chrome)");
6 f% |3 Q/ U7 N+ [8 d
}$ l" x: y" _* Y A. i% _' ]
& p' q4 r; i8 b1 c% z) E, o" `
function send(message) {
; F) \% d2 K! L4 {. W8 Q
if (!window.WebSocket) {
- H( @0 t- L+ A7 O; N3 \9 c* X0 H
return;( X! Z2 ^/ j; }; Z- m" y" c
}! u3 C2 g4 W2 @2 t# j
if (socket.readyState == WebSocket.OPEN) {+ D t7 v4 \ V; R) j* X: B" B
socket.send(message);
$ D! m$ N( R4 P! ^' _4 y
} else {
6 b( E4 i$ a- ^7 S* b& U9 k+ C* \- X
alert("The socket is not open.");3 L, f& a0 T5 u. d( Z
}9 Y5 V7 P# _; N2 ?
}7 k1 |) B: Z" y' y( v# m9 s
</script>/ X8 l1 |2 b! a
</html>

复制代码

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

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