在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>
, G* \. `' j# U
<html xmlns="http://www.w3.org/1999/xhtml">
: ~+ X" s% a$ D8 Y7 h7 Y/ V1 h
<head>: o( h1 `$ ^5 f7 ]
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>+ i; l0 M7 _, J( A
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>9 V( e6 ]" G" a3 B
<title></title>$ Q, S! Y+ Y- E% e1 h4 t) ^/ e
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>1 E$ Q9 E* p( M* H% j! x
<script>: y6 z2 D' E3 P0 L$ @! F1 X$ D
var ws;
3 s( W* T- i" o# C4 z- ?
$().ready(function () {
- C+ L; b9 B, k Q) s
$('#conn').click(function () {
9 @0 j6 ~$ |; y7 n; g' E
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
& w3 {; @6 [* G8 w* _% q8 I
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());/ @/ I% Y9 F+ A# N5 x' g) ]
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
5 w: {8 S& e" X4 B
//var host = "ws://192.168.85.128:8085/api/WSChat";
8 c% ^6 l$ e; I
//webSocket = new WebSocket(host);" \& a- X& T; i$ x
o( S# K( g8 Z
$('#msg').append('<p>正在连接</p>');! B* D3 |. g9 \$ O
+ n" a/ H1 d# F- y8 j4 I' I
ws.onopen = function () {5 g' g5 o$ B. K- `" r: C4 T
$('#msg').append('<p>已经连接</p>');) E: O, c, c/ u8 Y; ]
}- E& x4 H. H; C( s
ws.onmessage = function (evt) {0 v% c; a9 A" `; i9 Y& O7 ]( Q1 `
$('#msg').append('<p>' + evt.data + '</p>');3 Z9 V5 |* W6 N a. D7 g6 A6 o# W
}. a( ]8 N$ I0 Z3 {% m d/ F4 h1 A
ws.onerror = function (evt) {1 y& j \3 N) y, ]
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
( G; d7 B0 f+ q/ `
}& {: o" c& e) x& q- ?: P0 P0 |
ws.onclose = function () {/ d$ M6 Z5 y0 i4 C5 o# T! y O
$('#msg').append('<p>已经关闭</p>');; r% m, B; a, U7 \
}
7 k2 P f# ]3 v5 N, a
});3 H i0 U- q* A2 M; o
6 u/ [+ T# S2 f
$('#close').click(function () {" M! {6 i3 K% u# b: }
ws.close();
6 B/ J' Q2 B+ R1 W6 v0 s: |
});
: r4 \6 n2 h% v. _) r. C' a; s
" k* ~8 D+ d3 z" u% o
$('#send').click(function () {& a0 P: `9 L/ F- q, [3 s' h
if (ws.readyState == WebSocket.OPEN) {
0 n" g7 }6 s( S; r W$ S1 H4 u# \+ ]
ws.send($("#to").val() + "|" + $('#content').val());
% X9 R- G2 T& J5 r. X3 y2 V/ v
}
& o1 u% z6 m/ }3 m2 |0 c* i' K
else {
0 q7 a+ g9 W& p' s5 ~* X9 `, Y
$('#tips').text('连接已经关闭');
4 ^, W; Z# d; v' P& I
}
$ Y' _' S* B+ Z/ r; z" p; K
});! K z. T4 C7 T8 q
% ]' f I2 m; n; e
});
+ A8 S4 u# E$ O4 k/ x y1 F8 m
</script>6 e, ?7 y% s* V+ T2 F
</head>
2 |: @3 @; q9 B4 m3 {
<body>
! y# t. ^/ d' Q! `7 W% d7 i
<div>) W7 T7 ~- ]% @& x
<input id="user" type="text" />7 r2 P4 N. j( c1 b! M
<input id="conn" type="button" value="连接" />5 E6 c/ [, E! I4 d) H6 b) ~
<input id="close" type="button" value="关闭"/><br />% A/ Z: I) b& T) }4 y; {1 X. [
<span id="tips"></span>& l- b7 g) r. q; z
<input id="content" type="text" />
+ [8 t0 S+ K8 R& B$ v5 d
<input id="send" type="button" value="发送"/><br />1 Q6 ^* _2 y+ o0 e
<input id="to" type="text" />目的用户# {: r; ]' z# Q* F1 l' W
<div id="msg">7 @+ S. y X. e2 u
</div>/ g* D7 y1 B( K0 G/ k
</div>/ R0 J+ g- t) r$ m# I$ w
</body>/ |( }% b% @( J
</html>

复制代码

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

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

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

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

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