在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>
4 n" a! ]8 M" A5 r% r
<html xmlns="http://www.w3.org/1999/xhtml">
: u! h. O P; H C- p) U$ u
<head>
+ K5 Y8 B4 A" X }3 f/ n
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>5 q. q: ? ?- J& j9 `! s
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
7 k/ D1 B2 ?- P2 x9 V1 M
<title></title> ?4 A* \1 g- S: L. b# i+ a
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
U+ u0 t4 F! L, ]! N1 E
<script>/ _* d& n V' w4 a. Q6 e
var ws;
8 G' \' N9 O0 ?. y4 _% v
$().ready(function () {
, I% k# r/ G+ q+ [. `: p! S* b
$('#conn').click(function () {
0 Q" Y, x7 ?# M- N# v
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
T* _5 }" w! e6 V' I
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());# S3 s' D" `: V- }0 [1 x9 D
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();0 ~8 D+ K+ K+ U2 W9 k2 V9 k& z1 t
//var host = "ws://192.168.85.128:8085/api/WSChat";
: ~9 }& m% P* c6 Y: A
//webSocket = new WebSocket(host);
* f" x& P Y. Q
6 O# m1 ?, K H" i* b- A7 A
$('#msg').append('<p>正在连接</p>');
7 g5 x2 R! z1 h) E/ S# Q5 p
5 `! X8 v7 _+ B' T0 H6 H
ws.onopen = function () {0 j U' S% t" `7 x% e
$('#msg').append('<p>已经连接</p>');
3 l- u4 M+ z+ X, [: t
}
ws.onmessage = function (evt) {
7 G& s; j/ [- u2 e# T) B- ^
$('#msg').append('<p>' + evt.data + '</p>');2 }5 ] {7 n) u; A
}& d3 S& A8 t, m
ws.onerror = function (evt) { f: t/ G3 d/ p
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');) E* q4 ]& m- _! U% k" k, _
}
0 b. d: C1 w' ~$ q& Q& b
ws.onclose = function () {
3 u( }2 G5 H" F: Z4 [
$('#msg').append('<p>已经关闭</p>');5 R' Q" B1 {! K* M
}9 r- e2 O* R9 |" F
});
0 @6 I* F; x# q
) B- K) e1 A# D: M( E% Z
$('#close').click(function () {. j9 L# w2 Q9 |- d; X6 y
ws.close();! P6 O3 P7 D7 j- A) X* }
});
; r5 C- `( c s( y
5 p' K8 U1 P, t) C/ Q( A6 j
$('#send').click(function () {
3 c' G9 `; h2 ?; S
if (ws.readyState == WebSocket.OPEN) {
1 O( @7 m2 N& L: S
ws.send($("#to").val() + "|" + $('#content').val());
( U; o$ C5 T* B$ u$ [% h
}8 ^- ]& e0 Q. c& L5 q' e
else {
3 Q1 }% |' j @0 }- v
$('#tips').text('连接已经关闭');0 w e9 ?/ y4 U6 }, A! \) _- U' w
}( O- t$ V; R9 \( B6 i: y
});# a6 m- o4 b1 G {! r/ M. Y- Z
% P0 p) b1 J, B S& k
});
# u0 p, v* M5 u8 a4 A4 l0 t2 q
</script>% S& W& P4 p! C8 _, C, P9 p
</head>
6 J# k B: m( p: c) z( ^
<body>5 Z. j/ j8 _# N/ s" A1 R
<div>
- U! v# `' \+ h; `+ n+ E _! h
<input id="user" type="text" />
5 q- ~) C. f+ _. y: Z. N; M
<input id="conn" type="button" value="连接" /># S( L! P$ C; w( \+ ?
<input id="close" type="button" value="关闭"/><br />
0 h) E( ]' |8 a3 z- D
<span id="tips"></span>
7 z- |& _: l3 d q5 C! N
<input id="content" type="text" />
9 ~& J5 m" y9 G. w; q8 H2 N
<input id="send" type="button" value="发送"/><br />
! G" g# C# [$ }; ^
<input id="to" type="text" />目的用户- X9 l: i+ g4 @* \1 P% r. z3 B) a
<div id="msg">$ ]+ [7 r% c) P) i) T, a
</div>: o w( j- M3 Z) j2 ^4 ?
</div>( o1 G3 N- ~: A% u9 A, d- ?, c
</body>/ I. E7 N8 `# m# \: R0 U) g
</html>

复制代码

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

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

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

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

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