浏览器使用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:// 前缀。 7 ^. Q( |7 }0 \9 k6 f' d

; g2 s: @5 J8 q' i5 T% z: H. m
9 @' {7 M! G9 i该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
9 z1 j8 u+ G" z r: T
}
/ ^% k% X0 z/ w8 _' I0 I
* u' A* g- I$ y6 v _6 j
socket.onmessage = function(){
1 }9 _# x+ T8 v/ N
//在event.data消息数据# J. Y7 N& y" V# l, [
}) x/ q. ^# r% W& ]& V
6 Y g+ {1 r( E
socket.onclose = function(){
% }0 r4 J H3 l$ R9 C# M
//关闭WebSocket" \# n: ?0 M7 f X0 R3 L
}
. q; ], Q! k" Z: _* ~
. X2 \* Q6 G. q% v
socket.onerror = function(){
- C: c" |" Q0 J& X
//错误触发0 G8 b; q: j% k! d$ q& j7 p; ?2 D
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>1 i( u- s! C9 c8 F: E# U9 a
<head>
: w9 B* g5 ^- o# C$ h
<meta charset="UTF-8">0 t9 V/ z. M. d/ r; F: [
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">+ x) W1 D5 [1 B& a$ j* y4 b
<title>WebSocket</title>7 f9 U/ f1 l; H% a2 ?* J. \
</head>
8 E" t/ b5 b( @5 `
<body> M* H* [/ V* d& n8 h I u* f
</body>
/ B2 \+ Y8 c) }# v! e
<script>
% I% |0 R( n# c4 d9 o& @# _$ G
var socket;
0 h+ ]( b5 k1 ]
if (window.WebSocket) {
& Y" K4 s" j. h
socket = new WebSocket("ws://localhost:8080/myapp");% v, j1 P9 v: r" R' {1 C
socket.onmessage = function(event) {
5 n$ i% h/ A- A3 j& W
alert("Received data from websocket: " + event.data);
. X6 f, q* S$ _6 i
}
' T. v* `9 J* J3 x! s. x! H
socket.onopen = function(event) {
/ }* w: P4 H( i$ }% J8 C
alert("Web Socket opened!");
+ W% }2 p/ Z0 i/ N9 t2 R; Q
};& @6 Q( \2 o8 p; ]' k9 [& l
socket.onclose = function(event) {- ?6 C% H) S+ w
alert("Web Socket closed.");
: c! W* j; b% C4 z
};4 D! a3 Y8 T# R9 i: a$ k5 y$ N$ m* Q
} else {
1 \& k$ q4 w ^* m" c9 u% d- v* A
alert("Your browser does not support Websockets. (Use Chrome)");
; b$ R- P. }) b6 F0 a
}( Y* q6 w' W" t& `! }
4 a3 r6 X; D5 R% Z% K" r6 w- l
function send(message) {. H* i+ [* W7 p; `( p5 M2 K
if (!window.WebSocket) {
& m* B' J4 ~- U+ x/ C
return;0 c! Q$ a. Z2 E8 S7 Q1 N
}
3 ^$ p4 e& r/ ~3 [$ x
if (socket.readyState == WebSocket.OPEN) {* m% S; C6 N% t8 {
socket.send(message);: b9 ^4 d# P I1 [6 U% S
} else {
" t' l1 q1 @. e- C5 ?5 ^# k0 D
alert("The socket is not open.");
2 U9 Y/ O( ^. A) z
}
$ ~! ?, \' s- U7 J( \
}6 o# x/ I+ ~# _ o. |/ S
</script>; d& v/ y! r* o/ D9 s! _0 }
</html>

复制代码

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

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