在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>; f& c, a- S6 \/ U
<html xmlns="http://www.w3.org/1999/xhtml">
5 L' ]8 a5 Q3 \2 Z, R
<head>3 Y$ g0 r' ]) r- |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- k* r" W+ U+ j1 N4 ~0 ? O$ y
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
: N5 { h2 |% h8 M( ` v
<title></title>( \$ _7 Y3 j+ V C2 X1 Y
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
# y1 ~2 K; F: L" V0 P/ I! R
<script>9 i7 F2 P: l: N
var ws;. F1 w; Z$ H/ F
$().ready(function () {" U6 g# v/ e2 v$ l- F; J, ^
$('#conn').click(function () {
2 W; [& b& C- H$ p
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());* p8 o$ H5 @+ ]1 ~' k" A! V
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
0 q8 ~# R/ L. ?/ }
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
0 b2 s; M8 D& ~' ?
//var host = "ws://192.168.85.128:8085/api/WSChat";2 y$ g1 z' K" o/ N7 F
//webSocket = new WebSocket(host);
h) P4 `% |) S* R$ G7 Z7 U
! m" C- S/ y" R0 X
$('#msg').append('<p>正在连接</p>');7 x+ S) u+ }, c* I
6 O7 a. G G7 I5 J! C, q
ws.onopen = function () {
5 d6 Y6 }1 K) E& A q5 A8 A
$('#msg').append('<p>已经连接</p>'); e8 P8 m4 N) o5 e# E% |+ y, K. ^
}. E, o, ~2 z2 H& V
ws.onmessage = function (evt) {
) l- E) p7 g" X& |1 U
$('#msg').append('<p>' + evt.data + '</p>');( I- N/ _$ d. _) s( ~
}
9 Y4 u+ k( }* A; H, l/ U/ q
ws.onerror = function (evt) {" @: U* K* b& I; n; K; y Z9 @
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
, [/ {+ d: L4 }" Y
}
) v; y! ]" U: l: u, ~: W- o$ m1 O, d, d
ws.onclose = function () {
5 q! y) R% E( I" z( q
$('#msg').append('<p>已经关闭</p>');
4 D2 M$ p. k# r D6 U" [
}- r! ]1 c, s6 S9 S' j2 J, i
});: H+ N7 b! i" ^1 } K( s& ]
0 q- P4 p4 e- P9 x: o4 T
$('#close').click(function () {
* \$ `0 }3 w- G
ws.close();! B4 d4 R9 }7 K7 I6 h P
});+ N$ B! L4 ~; v& L ?, r1 G
) A( E8 i# k O- m4 ]5 b; w$ H- O
$('#send').click(function () {
; c6 y* I% w# F e
if (ws.readyState == WebSocket.OPEN) {) X. O7 d9 N8 m! Q) y* q! A2 i
ws.send($("#to").val() + "|" + $('#content').val());
3 M# o( ~7 g& i& |4 J3 ]% w% [- k
}- ]# o/ h: M) l$ \$ p% z
else {/ L0 A, ^" k- Q% m; V; C
$('#tips').text('连接已经关闭');
+ E- b& V r+ R, m
}
) O: \5 M; C: L) S3 \* Z) S8 f6 Y
});% b) V* m$ N3 q' Q+ u
$ a! a7 `6 x# ]. k8 b# u
});. Z2 X& T) k" [ x( y S
</script>* o- Q3 @# S* h3 R
</head>
! W1 l6 Z' b7 h1 b4 `
<body>
, s; B2 e; i% O+ H& F _
<div>/ {/ |# O5 I2 `6 G* s! O! _
<input id="user" type="text" />/ Z% t* ~+ Q+ g% }: d8 S) h& R# s
<input id="conn" type="button" value="连接" />) j) C* U, d8 M0 y: ^- ]; i
<input id="close" type="button" value="关闭"/><br />6 s2 @. D4 h5 A& \; D7 a: ?0 u
<span id="tips"></span>$ A( }$ j7 V0 X! n/ L) y, \
<input id="content" type="text" />
8 M6 S. p/ @ C
<input id="send" type="button" value="发送"/><br />/ d" O% G# L Z4 r& x5 O. [) o
<input id="to" type="text" />目的用户
, o9 W6 v3 e9 ~& g8 N
<div id="msg">
2 t! V- H5 c$ m$ E/ Z/ U; H
</div>
$ t& T3 r* s1 h$ z$ _! ^
</div>( c' B( M7 d4 z7 R% ]5 a
</body>
, E2 t$ {% J9 \: L9 j7 R. a; n* Z& Z
</html>

复制代码

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

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

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

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

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