在IIS上搭建WebSocket服务器（三）

admin · 发表于 2018-11-7 00:42:00

编写客户端代码

1.新建一个*.html文件。

ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
这个地方的IP和端口号对应着我们搭建在IIS上的WebSocket服务器

<!DOCTYPE html>
8 x. g4 `' G K
<html xmlns="http://www.w3.org/1999/xhtml">% \. T. w+ ?# b$ D0 _1 ~/ @
<head>
u' l6 `; |3 ~; r5 D
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>; r2 i- h0 E4 }5 }7 ?
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
1 t7 k5 w" a6 m; Q* L
<title></title>0 n0 H5 L/ h" e5 X/ U" G
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>2 ?) a! U, P2 _- g6 F! B2 ~0 C
<script>, M) s4 J% T* S! S; ^
var ws;
( |1 i4 D! K, z7 T5 u
$().ready(function () {
9 b9 b7 d! x' Z: U0 F6 H8 |
$('#conn').click(function () {- f" l( `0 _- j4 u2 M8 r
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());* A! {4 n6 T; i: S. e5 ^4 M; \
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
6 Y* G+ e" @: X4 o
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();9 h m% ^) C: U5 U( ?6 N' k
//var host = "ws://192.168.85.128:8085/api/WSChat";
" c" {/ B8 C& [ t8 z
//webSocket = new WebSocket(host);, ~9 s! f2 B9 Y9 G1 J+ {
# ?: |( K; N8 D3 l' n2 R P; K6 t+ Q
$('#msg').append('<p>正在连接</p>');$ K* u, z9 |1 h
6 h/ j7 J* Q: A# X1 _
ws.onopen = function () {
. V% u4 v1 N9 m1 O7 f2 z
$('#msg').append('<p>已经连接</p>');
% A S" ~% k5 P: V$ O/ H) g
}
* h4 o' c6 ]; l# ^" Z$ y0 L
ws.onmessage = function (evt) {
' I# W6 }) {9 O
$('#msg').append('<p>' + evt.data + '</p>');0 E6 f/ [# |4 m8 g1 I( `/ e
}4 J/ }' P' ?* z
ws.onerror = function (evt) {
* v' E5 F* L# B
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
4 f& u2 f8 k2 A: G
}
( F T3 t9 i. z% r
ws.onclose = function () {
; r8 r' m! I% R, w0 M$ W
$('#msg').append('<p>已经关闭</p>');
+ M% W* C2 X5 N; V" O/ t4 P1 J* N
}
) M) g0 a- M5 p8 P' ^7 ~
});' Z6 B2 o' }, q, s$ I- v
, E5 q. ~7 }) w$ ~1 j9 i7 J1 Q* E
$('#close').click(function () {; W) o& U/ _1 G- W1 e
ws.close();% m/ _6 C/ k3 G( L* c
});- N5 o/ A+ }$ |+ q- d5 t: N5 C7 r
5 \9 {: n/ n9 ~( X2 H
$('#send').click(function () {
- t" j# H& s. p- P2 F8 m1 A
if (ws.readyState == WebSocket.OPEN) { D' B" r, t p- v: f9 ~ O- A$ g& N
ws.send($("#to").val() + "|" + $('#content').val());& ?& l; K7 v$ @" j$ B" `" J# D
}
- I+ o% M/ t1 A9 P
else {/ j$ z$ U+ i* O% H8 P" F( `
$('#tips').text('连接已经关闭');
( }; \: A: {* F8 A, N
}
+ P8 Y) E! S5 N& M( ~
});
4 V8 S1 h6 f8 |) `: L P( I
) c! ^& J. C& o# f
});
( X9 R8 z* i2 k' ?! C6 y
</script>
& O/ ^+ `6 ]0 N9 a$ l. f2 x6 C
</head>
; r1 n, Y" x& K( F8 W. i' u" @- \
<body>
4 U# r& T/ f/ W! Q3 N, K
<div>, {0 t4 y3 l( M7 d
<input id="user" type="text" />- z1 {4 J( M- C# |- f: z
<input id="conn" type="button" value="连接" />$ T7 D! ?: C" p6 t% C
<input id="close" type="button" value="关闭"/><br />
- `, x8 f, }6 o; y4 T" k8 u
<span id="tips"></span>
5 p) w; i5 d9 L0 r+ z. _- }
<input id="content" type="text" />2 X9 s5 c- d H
<input id="send" type="button" value="发送"/><br />
1 T. ?0 A+ K) u4 n; L7 k
<input id="to" type="text" />目的用户- l" _8 }$ r" C$ y8 B% \
<div id="msg">
. J) @& t( H' K2 m/ ?' H
</div>5 e. D6 F, O- {6 M" _/ C" v
</div>
8 N% U# L3 ]; X+ W: u
</body>2 f& i, x/ ^+ d6 `* t8 B& O
</html>

复制代码

2.客户端A和客户端B通信效果

在浏览器中分别打开两个窗口，左边为客户端A，右边为客户端B，点击“连接”按钮，AB客户端分别与服务器建立连接

填写要发送的内容，即可看到A和B互相发送的信息了，即实现了AB客户端实现了WebSocket即时通信。

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

[html5] 在IIS上搭建WebSocket服务器（三）

浏览过的版块