一：写在前面

用过RN的都知道，RN有HotReload技术。而且修改一下RCTSocket.m（具体什么文件忘记了）文件中的localhost地址即可实现。但是Weex官方文档中并没有提及Weex 热加载的技术。是不是并不能实现呢？答案是否定的。在我翻阅了很多过时的陈旧的资料，以及Weexdemo后发现，weex也是可以实现热加载的。不知道是不是叫做hot reload，还是说只有RN的才是hot reload。我们暂时叫做实时更新吧。严谨一些。

二：什么是Hot reload？以及实现原理。

这里借鉴React Native 热加载（Hot Reload）原理简介 ，不知道weex的实时更新是否使用的和RN同样的技术。
warning:这一点埋个坑，以后来补。

三：Weex的实时更新实现

3.1 需求

我们要使用Weex在原有项目实现部分界面，但是总是拿手机去扫码感觉很low，为什么不能像RN一样，修改了js文件，界面直接在真机刷新呢？但是官方并没有提供相关的技术支持（也可能是我没找到）。简而言之，今天要把weex的实时加载（RN的hot reload）这个功能开启一下，分享给大家。这方法比较笨。如果有更好的办法，希望下方留言。谢谢。

3.2 过程

3.2.1 前期准备

首先，要有一个集成了weex项目的iOS 项目，具体的搭建流程可以参考这篇文章First:WEEX环境搭建+iOS现有项目集成;

3.2.2 过程

前面有很多过程，就不细谈了，大家都比较关心如何开启实时刷新，那就直接上干货。
前提：手机和电脑在同一个局域网内。

• 1.首先我们需要在pod中集成SRWebSocket，这个是为了加一个监听，监听文件的修改，并发送文件修改时的通知。在pod中复制以下代码.

pod 'SocketRocket', '0.4.2'

• 2.然后我们需要在Viewcontroller中导入SocketRocket的库，并导入代理方法。端口我发现都是8082，weexdemo中写的也是8082，代码如下

- (void)openHotReload{
    
    NSURL *socketURL = [NSURL URLWithString:[NSString stringWithFormat:@"ws://%@:%@", /*后面会说这个ip地址的由来*/, @"8082"]];
    self.hotReloadSocket = [[SRWebSocket alloc] initWithURL:socketURL protocols:@[@"echo-protocol"]];
    self.hotReloadSocket.delegate = self;
    [self.hotReloadSocket open];
}

• 3.实现SocketRocket的代理方法

- (void)webSocket:(SRWebSocket *)webSocket didReceiveMessage:(id)message{
    
    if ([@"refresh" isEqualToString:message]) {
        [self initWeexView];//这里是要自己初始化的weexview，下面给一个简单的weexview的实现
    }
}

- (void)initWeexView{
    _instance = [[WXSDKInstance alloc]init];
    _instance.viewController = self;
    _instance.frame = self.view.bounds;
    
    
    __weak typeof(self) weakSelf = self;
    _instance.onCreate = ^(UIView *view) {
        [weakSelf.weexView removeFromSuperview];
        weakSelf.weexView = view;
        [weakSelf.view addSubview:weakSelf.weexView];

    };
    
    _instance.onFailed = ^(NSError *error) {
        //process failure
    };
    
    _instance.renderFinish = ^ (UIView *view) {

    };
    ;
    //实时刷新，注意这个地方的后面的dist/App.weex.js，是你的vue文件的路径和名字。
    [_instance renderWithURL:[NSURL URLWithString:@"http:///*这个地址后面会说*//dist/App.weex.js"] options:nil data:nil];

}

• 4.实现hot reload，我们需要一个ip地址。

1. 首先cd到你自己写的vue文件。
2. 在终端输入 weex preview /*你的vue文件*/
这时会看到弹出一个浏览器。
3.这个浏览器前面的ip地址就是我们需要的ip地址。那么文件的路径是什么呢？点击那个大的二维码，看一下url，里面有文件路径。

• 5.替换上面提到的路径以及ip地址。

• 6.运行程序。随便修改vue文件，command+s保存一下，不出意外手机就会跟着刷新了。

四： 踩坑

4.1 IP地址

1.要同一个局域网下。
2.如果实在不知道路径，可以点一下那个大大的二维码，上面的URL就是本地编译的jsbundle文件路径。
3.websocket监听的是8082端口。render的是8081。别搞错。
修正：这里的监听的端口是会变化的。不一定是8082，8081。render的端口就在URL中，监听的端口比较隐蔽。我有必要说一下如何确定监听端口。

还记的之前输入weex preview ..vue那个命令行么？
会弹出一个页面，我们用chrome，进入调试界面。
我们点击NetWork，在header中可以找到类似于
Request URL: ws://192.168.10.238:8083/这样的东西。
后面的8083就是socket监听的端口。

五：预告

下一章节:JS与Native的交互--iOS篇

我是二毛，一个集智慧和逗比于一身的iOSer