在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>
- h4 |+ s2 y$ P7 m6 x3 T
<html xmlns="http://www.w3.org/1999/xhtml">3 k {: S+ K0 ~) Y% m
<head>
& ?( ]6 ^5 U7 O6 k; [
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
/ _# x6 P& K( U) E
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>9 u+ r5 b6 m& B9 I& \% t5 n8 A
<title></title>0 r* x! P- [, U! [
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
" @3 i5 |. P- W- n% w
<script>
9 v+ @$ m: l& U* H) r
var ws;0 R' G0 `6 ]7 _" \' |: t0 l
$().ready(function () {4 A2 H! n' {7 z0 U! [% ~, H3 S0 S' ^
$('#conn').click(function () {
6 J- ^ g7 V+ U
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
9 X& J$ A* S( Z
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());4 \8 R4 ]9 q' n2 K$ s
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
+ K) x6 Q$ D4 ~: M$ z# l
//var host = "ws://192.168.85.128:8085/api/WSChat";. V5 _) E( V5 i" a
//webSocket = new WebSocket(host);
+ l" U" d# C* T
+ [/ J8 u1 b- R4 M( q4 m
$('#msg').append('<p>正在连接</p>');/ ^% A+ c, y/ {- l
& h z8 Y( M1 J4 k( b4 H
ws.onopen = function () {4 j, y2 y# E$ o4 {; n0 t
$('#msg').append('<p>已经连接</p>');; V' Y" C4 u8 x! d! c5 g
}
- r2 f/ W6 P: L
ws.onmessage = function (evt) {. Z4 t; ]: y8 n3 G$ Z
$('#msg').append('<p>' + evt.data + '</p>');- u! Y+ B$ [# B5 o" K! J2 k- n- Y# H
}- a I% ~! e; O4 t. Y
ws.onerror = function (evt) {
8 Y7 e5 B6 }) P3 f3 b' O/ d" [$ D3 D
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');& ~2 U8 V4 ]5 Z
}9 S3 a8 |6 n$ j7 l* k! ~) g
ws.onclose = function () { A4 G: @9 u: y1 W
$('#msg').append('<p>已经关闭</p>');
- a( h$ P4 t9 G
}( I+ ?% m+ X: D& W! g4 d4 M
});( C& P+ a; q' w% E
& M* t* ]2 B5 i
$('#close').click(function () {
l1 z8 \( k0 @7 U
ws.close();
) k: d T+ T- W" F' {- l
});
" a# P, M' I; V+ O
! P9 R B' G6 }. e$ v/ m
$('#send').click(function () {
2 A$ T2 _, g4 w, x& @+ `4 K( r5 d
if (ws.readyState == WebSocket.OPEN) {1 z2 V7 ]4 c% t0 _
ws.send($("#to").val() + "|" + $('#content').val());9 D+ h- H2 a( C+ N! o! K6 ?& A0 Z4 ]
}
, a7 V3 u( M8 k! J! n
else {
# l; D! }4 L. y: ]
$('#tips').text('连接已经关闭');
: ? K: x# y6 _. N' |
}6 S, H/ S9 l( W3 R# i
});" l) s. G( j6 O; A% ]( n
|( S3 A# G* M5 f4 O
});4 Z( w, _9 O1 M* n
</script>
3 c0 E* D z. _' [* |" `: Z2 g
</head>8 R% X# h. R8 \9 {! T4 P
<body>
4 p5 X+ k, @7 f" ~
<div>
5 W% T0 N# l6 t, W: J
<input id="user" type="text" />
+ J5 r. n! b3 w) |1 l
<input id="conn" type="button" value="连接" />
* u" Z" l0 t" X: R8 _* ? c
<input id="close" type="button" value="关闭"/><br />
<span id="tips"></span>; a" ^, u: S) P1 }
<input id="content" type="text" />
* L4 m8 M! e' z! i [ ~ E: W' J
<input id="send" type="button" value="发送"/><br />- f4 Z" W* y2 q7 D
<input id="to" type="text" />目的用户
1 U H/ n& \6 v! {* G+ [7 V
<div id="msg">
: {5 G4 ]' {* s+ K
</div>
& k6 Z, Z, r7 h% H) Y% V
</div>
- I7 v/ ]# _! {/ `& x+ R2 r- d
</body>1 q8 [& s0 A9 d
</html>

复制代码

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

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

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

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

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