在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># ^# N5 C+ l+ W; d+ f7 b( [( c. C4 V
<html xmlns="http://www.w3.org/1999/xhtml">
! o; Q. J0 w3 e; [9 N7 u# s
<head>
9 y; Q; T9 l3 G- v) `+ f& ~4 H- s# h
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
* g5 N6 K: q! g+ b: J6 {, [$ o" ?$ f2 L
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
/ }7 {9 S" r0 ]$ E6 r
<title></title>; Q! _- |7 w- C( O. r1 {
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
$ ], E+ I4 ~! _' x; u
<script>
2 c% e* P8 o% B B
var ws;8 ^# H' z. {. \+ t/ K* x4 D" X+ t
$().ready(function () {
$ n; P! K! ^, n. m- t
$('#conn').click(function () {
/ S6 ^" b H+ w" O$ s
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
+ K1 E4 e. i% `3 f. S6 E9 @
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());, ?# v$ z3 h- y% n4 l2 O/ ~
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();: m- w L1 x" m& h9 Z# C
//var host = "ws://192.168.85.128:8085/api/WSChat";
! w3 E4 n; g$ p4 }
//webSocket = new WebSocket(host);4 T% V6 s3 h- y6 n* `8 U: K
: |* H6 s& b9 e) S/ t8 o7 ]
$('#msg').append('<p>正在连接</p>');- v6 m( Y( p$ J/ l; @' F
# N3 Y1 u% Y4 q7 N
ws.onopen = function () {
& _$ f& u/ q, j* o5 p0 x/ O
$('#msg').append('<p>已经连接</p>');$ l# b- R) b. a; y4 d5 f, ? k
}5 e* R% Z" }, H# g
ws.onmessage = function (evt) {
- x1 U9 a6 g$ U1 f+ l& n- Q( |
$('#msg').append('<p>' + evt.data + '</p>');1 h, t' y, F$ i
}- x& p% f- i3 Z
ws.onerror = function (evt) {1 V( G8 L& g: N. V( d7 R9 b2 P
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');% m* ~$ ?' u& h& ^* p
}
+ j' U& p, f& f9 z
ws.onclose = function () {
$ Q' D4 z3 {: U6 n4 N* ? @/ n
$('#msg').append('<p>已经关闭</p>');- ?4 I4 E) x+ E! |. I5 d
}& I" }8 C9 }, n1 L
});+ o: s9 A% { X' W1 k
+ W* U: |3 |! y- a* o! {- g8 l- ]
$('#close').click(function () {( |& ?5 Q) d5 `$ h, P9 C( ~
ws.close();
3 z. Q& I. Z9 n6 _+ \2 i1 q7 f6 ]
});7 g5 x* W2 |, q" C: M; L! K6 h& C
/ `# Y* R! N) c' R
$('#send').click(function () {( ?$ I4 f8 t- [1 a& H
if (ws.readyState == WebSocket.OPEN) {
; O# y+ \. y8 g4 H% e
ws.send($("#to").val() + "|" + $('#content').val());
: D: z7 K( q2 ]; @( v8 r4 o
}
5 D# e5 M$ ~1 {: j- _( }* ~) j
else {& ~4 q" [. C" D8 k/ {4 _( [
$('#tips').text('连接已经关闭');
6 C7 D- A$ |& N9 G- Q: s1 D
}
) x* G8 U: a9 v* k
});$ {& c$ W% j0 x" J0 r
# U( H6 i* u. @ V
});
3 L, D$ c& B/ e& n
</script>
. Y: @ ]+ m# O" Q" n
</head>
- k- o% B, F) ~/ D+ _! N
<body>) E% u: a6 h6 [! m
<div>) a- j, l7 y' c, L4 t% I! T
<input id="user" type="text" />
: K9 j8 E M: d0 A
<input id="conn" type="button" value="连接" />5 e8 d4 d7 W0 g' W
<input id="close" type="button" value="关闭"/><br />
% d% i+ f5 v7 j: R; s" f0 d/ ~
<span id="tips"></span>/ C! {1 p3 v" @8 h4 P0 M! y
<input id="content" type="text" />
" D, n5 E D& b8 u( ?6 ~! U
<input id="send" type="button" value="发送"/><br />
3 ?6 v i& e& t4 O
<input id="to" type="text" />目的用户& l4 `# {& P7 y/ Q5 ]3 d. F
<div id="msg">
7 R& H6 e9 @6 h5 V
</div>
1 S, P; y- a- `$ V4 @7 o
</div>* u$ n0 M( W& I1 Q9 l* P
</body>3 Y- l! w8 G4 F0 h4 p) O' j, G. Y
</html>

复制代码

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

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

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

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

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