在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>
" U) ?4 @3 n0 ~5 v- X5 C
<html xmlns="http://www.w3.org/1999/xhtml">
`) ~, A; n+ z. U# p
<head>* T4 z4 r# k. b2 O6 ]
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
: ]; j1 U# J% {( K8 W/ t0 \% M, U0 S
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
( t: _3 X: c& g
<title></title>
8 L q. U7 d3 B- Z' W1 B& J) \
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
7 F$ ]( o1 V9 G. ?! _: \) ^! {
<script>
8 W4 U8 f2 j+ g/ c: v
var ws;
) ]9 P! Q: \8 f+ l7 U0 h2 e; s
$().ready(function () {
8 I+ L! g$ Q- ~' _2 w' w
$('#conn').click(function () {
1 v1 Z( [% c' [1 k) m1 l
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());9 U r" ~7 `0 j# Z b& X4 H
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
4 R3 b' o& x, @7 ]9 V7 ?( j
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
/ T% L8 s3 `- Y3 U
//var host = "ws://192.168.85.128:8085/api/WSChat";5 E |* t: ]! A* D" S
//webSocket = new WebSocket(host);# w8 o3 M/ w* ~( |4 d
# _ ^# k, h, y$ J' h
$('#msg').append('<p>正在连接</p>');
" N, V/ J+ t! F/ k: ]
8 s2 Y) @2 A; x4 ?3 j/ S1 H# T. \
ws.onopen = function () {
* J- X. M' n. @" _& i3 Q
$('#msg').append('<p>已经连接</p>');! K3 @$ p0 X8 z& p& N1 f
}8 B# s9 Y5 S/ t5 @0 B/ W
ws.onmessage = function (evt) {
, L- p$ H3 |. E+ ^2 Q& G, G/ ?" n
$('#msg').append('<p>' + evt.data + '</p>');" Y1 D. Q0 }& D; q% r) x3 K
}
& S2 H9 T. y: a+ C+ b+ u( t
ws.onerror = function (evt) {
; Z" H' P' o1 ]7 D( X
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');+ R6 P% U0 Z! c$ b: d3 m) w1 J, y
}
* x6 Y9 W2 M3 q7 h/ J" C
ws.onclose = function () { M; L7 g6 n3 ?6 h1 X
$('#msg').append('<p>已经关闭</p>');; Q3 b$ @" _. F0 C: p- {0 Z2 b
}6 a' u- O; [" g: a0 Z, z
});
/ g S q" n+ ]" G' u8 W* g8 v
C( x% e" j9 `! ~" T* ^& u
$('#close').click(function () {
* a5 w, M5 r6 g
ws.close();
% [8 V. z; ?* f& r2 J1 a% V
});
* h- g S/ L- Y) Y. d) v a! Z
& n3 H. _; S/ z
$('#send').click(function () {' y9 z. w. c2 y8 W# T
if (ws.readyState == WebSocket.OPEN) {/ u3 A4 N5 q3 c3 N5 d6 a/ E
ws.send($("#to").val() + "|" + $('#content').val());: i4 ]/ Z0 f' K
}2 H6 {, B9 K: a# t
else {
, q5 B; M3 X! M" q
$('#tips').text('连接已经关闭');& k& G+ z o1 O- O; `
}
4 B7 D+ r; O, I9 i
});
( F; \) j( i: E! @& Z5 z
8 c- U6 ] g# R& S/ k; O& V
});! ~6 y/ V6 C3 J- M% Q3 K+ `& {3 @
</script>
- ^9 G+ m# m1 U% s v% Q* s; x7 R) ]
</head># d8 E. Q' ]2 p$ Y" \0 N2 Q ?" d
<body>- A) q) u# g! C" n$ [) V7 F
<div>
+ Q! j5 w( H" J$ d: T5 O
<input id="user" type="text" />: W7 T8 `$ E6 U/ [: C. |) y
<input id="conn" type="button" value="连接" />3 Q$ [$ v |3 [1 c8 t
<input id="close" type="button" value="关闭"/><br />
1 k, I {6 y* P9 h- t
<span id="tips"></span>
4 `% o% p& t- V: Y2 z
<input id="content" type="text" />' A; F( f- H0 I
<input id="send" type="button" value="发送"/><br />8 s" x% J. t1 j' t# F- V
<input id="to" type="text" />目的用户3 n3 ~" Q- F* k6 J# a4 o
<div id="msg">. ?) n# p! M& ?, B# K6 Z! I
</div>
}, _# k# S9 [" T; t8 r9 e
</div>
1 _- Z, h0 j L: y0 k) z
</body>+ o$ h, { F; i$ Z% d- _) C; ?
</html>

复制代码

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

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

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

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

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