在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>: `" C$ E/ J6 y$ O
<html xmlns="http://www.w3.org/1999/xhtml">
. ]5 u! {* y/ ~% S, ], {, x
<head>8 X9 Q* A: x: ~/ x7 u
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
0 [* O/ S, b/ v+ A
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
. k" Y1 ?0 w/ i" a P( R
<title></title>) L3 g2 b. m+ J! a! k
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>' h2 I# ^- P1 p) h
<script>
* G: C4 P& D& h& u: B# F9 }& u
var ws;' n. P1 x. @! ?+ V6 Q! k) N
$().ready(function () {
& @3 {* r0 R' ~# l, s% N& j$ e
$('#conn').click(function () {
% v1 M0 T5 Y2 }
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());5 ]. {* M* }) [
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
5 n, I" k/ ]4 Q) X1 V. S4 c
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
( v* A6 @5 Q8 {
//var host = "ws://192.168.85.128:8085/api/WSChat";0 ^* ~# F1 ?9 |, T3 G
//webSocket = new WebSocket(host);
% P6 I* K! s* V2 l* q4 f0 l
6 X/ ^/ g# I* @) G& S, W2 M4 A
$('#msg').append('<p>正在连接</p>');
, O" S7 r% d) q' \
F7 v9 y' _; m$ e6 n0 @2 P- G" @
ws.onopen = function () {
, B O6 Q0 D) N1 K+ W* I# T1 I
$('#msg').append('<p>已经连接</p>');0 o3 F, f4 i& g6 m+ l1 r. a
}
: {0 C2 n/ q# g' P
ws.onmessage = function (evt) {9 O3 d8 X3 N& C8 L
$('#msg').append('<p>' + evt.data + '</p>');% t$ z$ Y5 _1 q! l; ^
}
5 M+ H% x2 |' a9 A# `
ws.onerror = function (evt) {; D- E2 ?! w' {1 i( F
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');4 ^) R4 j7 G0 c5 n
}
3 y& U, T% @, o: y I3 c" S( H7 E
ws.onclose = function () {% P; N( i+ L( c6 Y4 n% S
$('#msg').append('<p>已经关闭</p>');5 i9 l/ C2 u' ~- L8 X6 i
}
+ h( c" t9 C& k8 m- W1 [3 c. J1 q
});# a- {$ U+ n: {; u& X
1 T8 L8 W$ G; T8 k1 i; p& B
$('#close').click(function () {* ?! D/ L1 l7 A$ c4 H
ws.close();9 b) x' P. A! ]2 y
});
6 E/ n0 j2 a; M& U. ?! S G) G1 b
1 e2 |3 `6 F+ E! j
$('#send').click(function () {
( k$ o$ b) g. B- ?3 ~
if (ws.readyState == WebSocket.OPEN) {. @+ |& v) R; D! e3 K
ws.send($("#to").val() + "|" + $('#content').val());5 ]. `2 ?* P2 z6 X7 l) ^4 i
}; ~% k! T, ~: c* ]$ B; i
else {
! p3 g+ N1 ~* d1 r
$('#tips').text('连接已经关闭');
9 P/ E$ Y( \+ V
}
]% `; `+ y" u/ V& |5 [
});
4 k8 Q) Y! ^; I, V7 l* K/ Z( d
9 o1 c. N5 x; H, C! y/ v4 ?) I c3 L
});
6 [( g4 l( @2 \# w
</script>
/ C9 k$ G0 v X, X/ [$ B( ?- a
</head>
/ D) t$ ?0 f; u' E' h
<body>
, q( c+ S0 j5 T* p2 L3 q( Z6 P
<div>
/ z! {, T7 f7 p; ~ W
<input id="user" type="text" />
1 x' j) r0 D% v8 g) e H7 l
<input id="conn" type="button" value="连接" />: A7 m& {' I# v# \2 v
<input id="close" type="button" value="关闭"/><br />$ @( C# w; J ~% j' u' z0 I, n; H+ A
<span id="tips"></span>
- j# E& [5 v% Y# l" V8 _
<input id="content" type="text" />8 j7 j$ D5 f5 k) n
<input id="send" type="button" value="发送"/><br />, d) d# h2 V. `6 c% W0 N
<input id="to" type="text" />目的用户
: `# W( M4 F' X- M0 o& Y
<div id="msg">
. Q- y0 ^ s+ z- @0 A7 Z
</div>
* Z( z) ]2 T% B4 O; Y. S6 f
</div>
; J) V" s4 ]- H1 P
</body>
" m7 F* M; @; i
</html>

复制代码

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

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

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

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

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