在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>& V: C' i' S6 n2 i
<html xmlns="http://www.w3.org/1999/xhtml">
9 t+ A$ }. j6 s
<head>% v7 L& J) B. n8 q b: f5 U
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/># H. _" p) \( d, S
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
4 c( A# F' n- d3 u" L" R1 m3 z
<title></title>; s1 A/ c1 D6 y- K
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
5 P% S5 c$ y2 M% s1 G7 q
<script>8 c' {; S* N5 S2 O4 V0 ?" a9 N
var ws;/ s# o9 p M M) m
$().ready(function () {
, H2 l+ P1 o6 [: b
$('#conn').click(function () {3 r1 e3 E# _# y* j# ?
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
% p1 y; M( ^. h( S- a
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
1 n! `- a7 D% l! F0 h
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
, R$ ]% l+ n" \/ i7 h3 \$ d5 E6 a- n
//var host = "ws://192.168.85.128:8085/api/WSChat";
4 V( ^- x7 d7 a* H
//webSocket = new WebSocket(host);0 ]. i y5 \0 I& \9 t
0 x* T: ?6 v" B6 S9 i6 H$ d$ o
$('#msg').append('<p>正在连接</p>');
% u, t$ @7 m( u4 B- d- m
! v& ?4 F i9 F2 Y8 w1 `( A$ ^; n
ws.onopen = function () {, L+ Q6 t, t X6 A
$('#msg').append('<p>已经连接</p>');
4 J4 E$ m' T1 R; J: E
}& S9 K2 H" o1 s0 q/ D
ws.onmessage = function (evt) {# R7 B3 g3 m4 D& ?
$('#msg').append('<p>' + evt.data + '</p>');, Z: A5 P) o U4 g* u( h' l
}8 H3 p. B+ W& N9 F2 P
ws.onerror = function (evt) {
; B8 G z- @* g, L8 L
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');/ ]/ P6 ]0 P5 y R2 |
}
3 X: t) D1 b5 N0 T& W
ws.onclose = function () {1 d# |0 k/ \$ N; V
$('#msg').append('<p>已经关闭</p>');; @$ C7 ^$ o% g* ~$ S) J7 p& j: ^8 E
}
1 j' c4 o- @ M7 T# Y
});
, a2 h' _: Q9 Y0 i5 X6 @% f
4 L( w1 I5 t' c, @9 L4 z
$('#close').click(function () {
' M+ n( S3 W1 q4 f; k/ Z+ Y ?* u/ ]
ws.close();
( O! p, u7 q! A7 A
});# v- W) [6 F# O* ~& u+ {8 E
3 N; g9 e/ b! D. ?
$('#send').click(function () {2 L4 _- f' w6 S5 r- y8 ^
if (ws.readyState == WebSocket.OPEN) {$ j3 Z; }, ?6 O' t& A
ws.send($("#to").val() + "|" + $('#content').val()); b( z5 S" m$ W- z/ |% Z% w! u
}
, s% X9 ~. O$ ]5 U( c: U
else {8 Y: y9 ^$ y3 r9 E4 {8 X
$('#tips').text('连接已经关闭');+ C1 q" X3 J9 L: t1 ^
}
3 l2 J5 J3 B1 ?2 u0 E; b# B' L
});. X, V' g, P* f0 c
9 P% W( T! d; ?7 A8 I
});
: r3 |4 d% n) o" s
</script> Q- Q2 e4 m+ k2 ]
</head>
; b/ x- L0 b( V$ a, L6 O
<body># E2 a/ i- v" P1 C
<div>
d. b! |: r1 h$ Y, C# M T
<input id="user" type="text" />
% s: o$ {8 i/ L; ^2 _
<input id="conn" type="button" value="连接" />& y, I& R3 ~, E2 @+ k
<input id="close" type="button" value="关闭"/><br />
2 @1 c9 M$ u. V* q) K
<span id="tips"></span> a& A% p) Q% L. i" u z! F2 r3 p
<input id="content" type="text" />4 K0 Q, Y% Q1 Y! B' y4 I( r; |/ w8 \, N
<input id="send" type="button" value="发送"/><br />0 r' m5 t6 Y, J1 M& f. k' Y
<input id="to" type="text" />目的用户
2 s3 r7 f; k- v) O; Z& [* ]
<div id="msg">; C) J0 ]+ H- L+ n
</div>
7 o4 m1 K, z% k. Q! D8 H
</div>6 r6 T; f$ z* ^" _# ?
</body>
8 a2 T" O+ o, b3 o [+ M7 c) \
</html>

复制代码

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

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

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

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

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

浏览过的版块