开发后怎么使用小程序_iOS + node.js使用Socket.IO框架

2021-01-12 12:06 jianzhan
iOS + node.js使用Socket.IO框架进行实时通信示例       本篇文章主要介绍了iOS + node.js使用Socket.IO框架进行实时通信示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。

Socket.IO是一个基于WebSocket的实时通信库,在主流平台都有很好的支持,此文主要是通过一个小例子来演示Socket.IO的使用。

基础环境搭建

新建一个文件夹(JS工程),创建一个package.json,复制以下内容并保存。

 "name": "socket-chat-example",
 "version": "0.0.1",
 "description": "my first socket.io app",
 "dependencies": {}
}

然后执行npm命令,安装我们需要的依赖(Express和Socket.IO), 请确保你电脑已经有node环境

在项目根目录也就是package.json所在的目录在终端执行以下命令

npm install --save .2
npm install --save socket.io

进度条读完后会多这么一个文件夹,此时Express和Socket.IO就已经安装好了,这和iOS的Cocopods差不多,以模块化进行加载。


<作为客户端。(为了方便演示,我这里有两个客户端,一个是iOS端,一个是浏览器端)

<

这也是官方Demo的演示界面,UI上没做修改


代码如下

 !doctype html 
 html 
 head 
 title Socket.IO chat /title 
 style 
 * { margin: 0; padding: 0; box-sizing: border-box; }
 body { font: 13px Helvetica, Arial; }
 form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
 form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
 form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
 #messages { list-style-type: none; margin: 0; padding: 0; }
 #messages li { padding: 5px 10px; }
 #messages li:nth-child(odd) { background: #eee; }
 /style 
 /head 
 body 
 ul id="messages" /ul 
 form action="" 
 input id="m" plete="off" / button Send /button 
 /form 
 /body 
 /html 

index.js

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/',function(req,res){
 ');
http.listen(3000,function () {
 console.log('listien 3000');

开启了一个Server,监听3000端口,然后回到项目根目录,在终端输入node index.js

如果出现listen 3000则表明服务开启成功了,此时在浏览器访问p>

iOS客户端的集成

新建一个iOS工程,在终端cd到项目根目录创建一个Podfile文件

vim Podfile

复制以下内容

use_frameworks!
target 'SocketIO_Chat_Example' do #项目名
 pod 'Socket.IO-Client-Swift', '~ 8.2.0'

保存退出,执行命令安装依赖

pod install or pod install --verbose --no-repo-update

请确保已经有cocopods环境

iOS端的UI


使用Socket.IO

此时我们的客户端和服务端都已经有了Socket.IO的环境了,接下来就是使用它进行聊天了。

Socket.IO中事件的处理主要通过这两个方法来实现的

on(_ event: String, callback: NormalCallback)
emit(_ event: String, _ items: AnyObject...)

on方法为接收事件的方法,emit为发送事件的方法

我们的需求是让浏览器和iOS客户端进行单聊

服务端的处理

要想发送到指定的客户端,需要知道当前客户端的id(Socket.IO的id,例:3t60BArlK47a2fA-AAAd),但是客户端并不清楚,客户端只知道我们自己定义的id,所以我们要将Socket.IO的Id和我们自己定义的id绑定并存储起来。

var socketArray = new Array();
io.on('connection', function(socket){
 var islogin = false;
 console.log('**********新加入了一个用户*********',socket.id);
 socket.on('login',function (userId) {
 if(islogin) return;
 socket.userId = userId;
 socketArray.push(socket);
 islogin = true;
 socket.on('privateMessage',function (data) {
 console.log(data);
 socket.on('chat message', function(data){
 var to = data.toUser;
 var message = data.message;
 for(var i = 0;i socketArray.length;i++){
 var receiveData = socketArray[i];
 if (receiveData.userId == to){
 io.to([receiveData.socketId]).emit('privateMessage',''+receiveData.userId+':'+message);
 socket.on('disconnect',function () {
 console.log('***********用户退出登陆************,'+socket.id);

客户端的处理

浏览器的处理

 script src="/socket.io/socket.io.js" /script 
 script src="jquery-1.11.1.js" /script 
 script 
 var socket = io();
 socket.emit('login','30621');
 $('form').submit(function(){
 socket.emit('chat message',{'toUser':'30342','message':$('#m').val()} );
 $('#m').val('');
 return false;
 socket.on('chat message', function(msg){
 $('#messages').append($(' li ').text(msg));
 socket.on('privateMessage',function (msg) {
 $('#messages').append($(' li ').text(msg));
 /script 

iOS端的处理

iOS在初始化的时候需要一个config字典,config可以配置诸如log日志输出等设置

- (SocketIOClient *)client{
 if (!_client) {
 NSURL* url = [[NSURL alloc] initWithString:@"/按钮点击事件
- (IBAction)sendMessage:(id)sender {
 if (self.inputView.text.length 0) {
 [self.client emit:@"chat message" with:@[@{@"toUser":@"30621",@"message":self.inputView.text}]];
 [self.messageArray insertObject:self.inputView.text atIndex:0];
 [self.messageTableView insertRowsAtIndexPaths:@[[NSIndexPath indexPathForRow:0 inSection:0]] withRowAnimation:UITableViewRowAnimationTop];
 self.inputView.text = @"";

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。